/* ============================================================
   대전 인쇄마켓 · home.css v25
   홈페이지 전용 스타일
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════════
   HERO — Teal 인쇄판이 Gold 용지 위에 내려앉는 순간

   토큰 규칙
     · 전역(:root) = UI 색 · 그림자 · 모션
     · 지역(.hero) = 일러스트(SVG 아트) 전용 팔레트
       → 아트 색은 이 컴포넌트 밖에서 쓰이지 않으므로 :root 를 오염시키지 않는다
   비율: 타이틀 64 → 카드 288 → 비주얼 260(1:1) → 라벨 21
   ══════════════════════════════════════════════════════════════════════ */

.hero{
    /* ── 지역 토큰 · 히어로 SVG 아트 팔레트 ──
       인쇄/디자인의 고유 시각 언어를 그리기 위한 색.
       색상바는 실제 CMYK 대신 브랜드 팔레트를 쓴다 —
       형태(등간격 칩 + 레지스터 마크)만으로 '인쇄'가 읽히고,
       Cyan/Magenta 를 넣으면 CI 가 깨지기 때문.                  */
    --art-sheet:#ffffff;        /* 인쇄 용지 앞장 */
    --art-sheet-2:#f6f2e9;      /* 인쇄 용지 뒷장 */
    --art-line:#c3d0d4;         /* 본문 텍스트 라인 */
    --art-rule:#e8e2d4;         /* 자(ruler) 바탕 */
    --art-rule-tick:#a3aeb4;    /* 자 눈금 */
    --art-teal:#2e8f96;         /* 색상바 Teal · 이미지 블록 */
    --art-teal-2:#3a9ea3;       /* 베지어 핸들 */
    --art-gold:#d8a63f;         /* 색상바 Gold */
    --art-gold-2:#e3b04b;       /* 배치 요소 */
    --art-navy:#274b6b;         /* 색상바 Navy · 헤드라인 · 패스 */
    --art-navy-2:#2f6486;       /* 배치 요소 */
    --art-cream:#eadbb8;        /* 색상바 용지 */
    --art-ink:#3f4a51;          /* 색상바 먹 · 레지스터 마크 */
    --art-bg-print-1:#e4f2ee;   /* 인쇄 카드 배경 */
    --art-bg-print-2:#8fc9c6;
    --art-bg-design:#f1e7d3;    /* 디자인 카드 배경 */
    --art-bg-both-1:#bfe0dd;    /* 인쇄+디자인 카드 배경 */
    --art-bg-both-2:#efe4cd;

    /* ── 카드 놓임 — 손으로 툭 놓은 느낌 ──
       규칙이 보이면 '정렬'로 읽힌다. 그래서:
         · 부호를 번갈아  (− + −)   → 부채꼴 방지
         · 크기를 불규칙  (2.4/1.6/1.0)
         · 들림도 제각각  (+2/−5/+4)
       호버 시 rotate(0) 으로 '제자리'                       */
    --tilt-1:-2.4deg;  --lift-1:2px;
    --tilt-2:1.6deg;   --lift-2:-5px;
    --tilt-3:-1deg;    --lift-3:4px;

    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    min-height:calc(100vh - 108px);
    padding:64px 0 72px;
    background:
        radial-gradient(120% 90% at 84% 96%, var(--gold-glow) 0%, rgba(233,185,58,0) 58%),
        radial-gradient(90% 70% at 8% 4%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(168deg,
            var(--teal-800)  0%,
            var(--teal-700)  34%,
            var(--teal-400)  58%,
            var(--paper-edge) 74%,
            var(--paper-2)   90%,
            var(--paper)     100%);
}

/* ─ 배경 라인아트 ─ */
.hero-art{
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
}
.hero-art .ha-cool{ stroke:rgba(255,255,255,.20); }
.hero-art .ha-warm{ stroke:rgba(26,38,54,.10); }

.hero .inner{ position:relative; z-index:1; width:100%; }
.hero-inner{
    display:flex; flex-direction:column; align-items:center;
    gap:52px; text-align:center;
}

/* ─ 타이틀 ─ */
.hero-title{
    margin:0;
    font-size:64px; font-weight:900;
    line-height:1.26; letter-spacing:-.035em;
    color:var(--white);
    text-shadow:0 2px 18px rgba(0,72,80,.28);
}
.hero-title em{
    font-style:normal;
    color:var(--gold);
    text-shadow:0 2px 18px rgba(0,72,80,.22);
}

/* ─ 카드 3 (폴라로이드) ─ */
.hero-cards{
    display:flex; justify-content:center; align-items:flex-start;
    gap:32px;
}

.hero-card{
    display:block;
    width:288px; flex:0 0 auto;
    padding:14px 14px 0;
    background:var(--white);
    border-radius:var(--r-sm);
    text-decoration:none;
    color:var(--navy);
    box-shadow:var(--sh-2);
    transition:transform var(--t-base) var(--ease),
               box-shadow var(--t-base) var(--ease);
    will-change:transform;
}
.hero-card.hc-1{ transform:rotate(var(--tilt-1)) translateY(var(--lift-1)); }
.hero-card.hc-2{ transform:rotate(var(--tilt-2)) translateY(var(--lift-2)); }
.hero-card.hc-3{ transform:rotate(var(--tilt-3)) translateY(var(--lift-3)); }

.hero-card:hover,
.hero-card:focus-visible{
    transform:rotate(0deg) translateY(-14px) scale(1.025);
    box-shadow:var(--sh-3);
}
.hero-card:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }

.hc-visual{
    display:block;
    aspect-ratio:1 / 1;
    border-radius:var(--r-xs);
    overflow:hidden;
    background:var(--paper-ghost);
}
.hc-visual svg,
.hc-visual img{
    display:block;
    width:100%; height:100%;
    object-fit:cover;
}

.hc-label{
    display:flex; align-items:center; justify-content:center;
    height:66px;
    font-size:21px; font-weight:800;
    letter-spacing:-.03em;
    color:var(--navy);
    transition:color var(--t-base);
}
.hero-card:hover .hc-label{ color:var(--teal-d); }

/* ═══ 반응형 ═══ */

/* 낮은 화면 높이 — 한 화면 유지 */
@media(max-height:820px){
    .hero{ padding:44px 0 52px; }
    .hero-inner{ gap:40px; }
    .hero-title{ font-size:54px; }
    .hero-card{ width:246px; }
    .hc-label{ height:58px; font-size:19px; }
}

@media(max-width:1100px){
    .hero-title{ font-size:54px; }
    .hero-inner{ gap:44px; }
    .hero-cards{ gap:24px; }
    .hero-card{ width:238px; padding:12px 12px 0; }
    .hc-label{ height:58px; font-size:19px; }
}

@media(max-width:880px){
    .hero{ min-height:0; padding:56px 0 64px; }
    .hero-title{ font-size:42px; }
    .hero-inner{ gap:38px; }
    .hero-cards{ gap:18px; }
    .hero-card{ width:200px; padding:10px 10px 0; }
    .hc-label{ height:50px; font-size:16px; }
    .hero{ --lift-1:1px; --lift-2:-3px; --lift-3:2px; }
}

@media(max-width:640px){
    .hero{ padding:44px 0 52px; }
    .hero-title{ font-size:32px; line-height:1.32; }
    .hero-inner{ gap:32px; }
    .hero-cards{
        flex-direction:column; align-items:center;
        gap:22px; width:100%;
    }
    .hero-card{
        width:100%; max-width:300px;
        padding:12px 12px 0;
    }
    .hero-card.hc-1,
    .hero-card.hc-2,
    .hero-card.hc-3{ transform:rotate(0deg); }
    .hero-card:hover{ transform:translateY(-6px); }
    .hc-label{ height:56px; font-size:18px; }
}

@media(prefers-reduced-motion:reduce){
    .hero-card{ transition:none; }
}

/* ══════════════════════════
   홍보 배너 띠
══════════════════════════ */
.promo-strip{ background:var(--off); padding:0; border-top:2px solid var(--gold); border-bottom:1px solid var(--line); }
.promo-strip-inner{ display:flex; align-items:stretch; }
.ps-item{ flex:1; display:flex; align-items:center; gap:14px; padding:18px 22px; text-decoration:none; color:inherit; transition:.15s; position:relative; overflow:hidden; }
.ps-item:hover{ background:var(--white); }
.ps-item:hover .ps-icon{ background:var(--teal); color:#fff; }
.ps-item:hover strong{ color:var(--teal); }
.ps-icon{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background:rgba(0,180,188,.1); color:var(--teal); display:flex; align-items:center; justify-content:center; transition:.15s; position:relative; z-index:1; }
.ps-icon i{ width:18px; height:18px; }
.ps-item div{ flex:1; min-width:0; }
.ps-item strong{ display:block; font-size:13px; font-weight:800; color:var(--ink); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ps-item span{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.ps-arrow{ width:16px; height:16px; color:var(--dim); flex-shrink:0; transition:.15s; }
.ps-item:hover .ps-arrow{ color:var(--teal); transform:translateX(3px); }
.ps-divider{ width:1px; background:var(--line); flex-shrink:0; margin:12px 0; }
.ps-item::before{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%); background-size:200% 100%; animation:shimmer 3.5s ease infinite; pointer-events:none; z-index:0; }
@keyframes shimmer{ 0%{ background-position:-200% center; } 100%{ background-position:200% center; } }

/* ══════════════════════════
   놓치지 말아야 할 콘텐츠
══════════════════════════ */
.highlight-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.highlight-card{ padding:26px 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); text-align:center; transition:transform .22s, box-shadow .22s, border-color .22s; cursor:pointer; position:relative; overflow:hidden; }
.highlight-card:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 12px 28px rgba(233,185,58,.15); }
.hc-icon{ width:54px; height:54px; border-radius:50%; background:var(--teal-s); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; transition:.18s; }
.highlight-card:hover .hc-icon{ background:var(--teal); }
.highlight-card:hover .hc-icon i{ color:#fff; }
.hc-icon i{ width:24px; height:24px; color:var(--teal); transition:.18s; }
.hc-title{ font-size:15px; font-weight:900; color:var(--ink); margin-bottom:6px; }
.hc-desc{ font-size:13px; color:var(--muted); line-height:1.6; }
.hc-char{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; z-index:0; }
.hc-char img{ width:100%; height:100%; object-fit:cover; display:block; filter:blur(1px) saturate(.9); }
.hc-char::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.92) 100%); }
.highlight-card:hover .hc-char{ opacity:1; }
.highlight-card .hc-icon,.highlight-card .hc-title,.highlight-card .hc-desc{ position:relative; z-index:1; }

/* ══════════════════════════
   SERVICE 카드
══════════════════════════ */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--white); transition:.18s; cursor:pointer; position:relative; }
.service-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(233,185,58,.15); border-color:var(--gold); }
.sc-img{ height:220px; background:var(--off-2); overflow:hidden; }
.sc-img img{ transition:.6s ease; }
.service-card:hover .sc-img img{ transform:scale(1.05); }
.sc-body{ padding:22px; position:relative; overflow:hidden; }
.sc-bg{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; z-index:0; }
.sc-bg img{ width:100%; height:100%; object-fit:cover; display:block; filter:blur(2px) saturate(.8); }
.sc-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.94) 100%); }
.service-card:hover .sc-bg{ opacity:1; }
.sc-category{ display:inline-flex; align-items:center; height:20px; padding:0 9px; border-radius:var(--r-pill); background:var(--gold-s); color:var(--gold-d); font-size:10px; font-weight:800; letter-spacing:.04em; margin-bottom:8px; border:1px solid rgba(233,185,58,.3); position:relative; z-index:1; }
.sc-title{ font-size:18px; font-weight:900; color:var(--ink); margin-bottom:8px; letter-spacing:-.02em; position:relative; z-index:1; }
.sc-desc{ font-size:13px; color:var(--muted); line-height:1.65; position:relative; z-index:1; }
.sc-link{ display:inline-flex; align-items:center; gap:4px; margin-top:14px; font-size:13px; font-weight:700; color:var(--teal); position:relative; z-index:1; }
.sc-link i{ width:13px; height:13px; }

/* ══════════════════════════
   참여업체 (홈)
══════════════════════════ */
.company-section-wrap{ display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:start; }
.company-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.company-card{ display:flex; flex-direction:row; align-items:center; gap:18px; padding:20px; border:1.5px solid var(--line); border-radius:var(--r-lg); background:var(--white); transition:.18s; cursor:pointer; min-height:100px; position:relative; overflow:hidden; }
.company-card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 8px 24px rgba(233,185,58,.18); }
.comp-thumb{ width:86px; height:86px; flex-shrink:0; border-radius:var(--r-md); overflow:hidden; background:var(--off-2); }
.comp-thumb img{ width:100%; height:100%; object-fit:cover; transition:.5s; filter:saturate(.85); }
.company-card:hover .comp-thumb img{ filter:saturate(1.05); transform:scale(1.06); }
.comp-info{ flex:1; min-width:0; }
.comp-info h3{ font-size:17px; font-weight:900; color:var(--ink); margin-bottom:4px; letter-spacing:-.02em; }
.comp-info .genre{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:10px; }
.company-intro-panel{ background:var(--navy); border-radius:var(--r-lg); padding:36px 32px; display:flex; flex-direction:column; justify-content:space-between; min-height:380px; position:relative; overflow:hidden; }
.company-intro-panel::before{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:var(--teal); opacity:.09; filter:blur(44px); bottom:-50px; right:-50px; pointer-events:none; }
.cip-tag{ display:inline-flex; align-items:center; height:24px; padding:0 11px; border-radius:var(--r-pill); background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); font-size:11px; font-weight:700; margin-bottom:16px; width:fit-content; }
.cip-title{ font-size:26px; font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1.2; margin-bottom:14px; }
.cip-desc{ font-size:13px; color:rgba(255,255,255,.58); line-height:1.72; margin-bottom:22px; flex:1; }
.cip-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.cip-tags span{ padding:5px 12px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.7); font-size:11px; font-weight:700; cursor:pointer; transition:.15s; }
.cip-tags span:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ══════════════════════════
   카테고리 (홈)
══════════════════════════ */
.cat-filter{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:36px; }
.cat-filter-btn{ height:38px; padding:0 18px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--white); font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; transition:.16s; }
.cat-filter-btn:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }
.cat-filter-btn.active{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:800; box-shadow:0 0 0 2px var(--gold); }
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.cat-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); text-align:center; padding:22px 10px 18px; cursor:pointer; transition:.18s; position:relative; overflow:hidden; }
.cat-card:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 10px 24px rgba(233,185,58,.15); }
.cat-bg{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; z-index:0; }
.cat-bg img{ width:100%; height:100%; object-fit:cover; display:block; filter:blur(1px) saturate(.85); }
.cat-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.9) 100%); }
.cat-card:hover .cat-bg{ opacity:1; }
.cat-icon{ width:52px; height:52px; border-radius:50%; background:var(--teal-s); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; transition:.18s; position:relative; z-index:1; }
.cat-card:hover .cat-icon{ background:var(--teal); }
.cat-card:hover .cat-icon i{ color:#fff; }
.cat-icon i{ width:22px; height:22px; color:var(--teal); transition:.18s; }
.cat-name{ font-size:14px; font-weight:900; color:var(--ink); margin-bottom:3px; position:relative; z-index:1; }
.cat-en{ font-size:10px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; position:relative; z-index:1; }

/* ══════════════════════════
   PORTFOLIO (홈 다크)
══════════════════════════ */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.port-card{ border-radius:var(--r-lg); overflow:hidden; position:relative; cursor:pointer; background:var(--navy-3); }
.port-card:hover .port-img img{ transform:scale(1.06); filter:brightness(.95); }
.port-img{ height:220px; overflow:hidden; }
.port-img img{ transition:.6s ease; filter:brightness(.9); }
.port-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(26,38,54,.9) 100%); }
.port-body{ position:absolute; left:18px; right:18px; bottom:16px; }
.port-tag{ display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:var(--r-pill); background:var(--teal); color:#fff; font-size:10px; font-weight:800; margin-bottom:8px; letter-spacing:.04em; }
.port-body h3{ font-size:17px; font-weight:900; color:#fff; letter-spacing:-.02em; margin-bottom:3px; }
.port-body p{ font-size:12px; color:rgba(255,255,255,.65); }

/* ══════════════════════════
   프로세스
══════════════════════════ */
.process-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.proc-step{ padding:28px 20px; text-align:center; border-right:1px solid var(--line); background:var(--white); transition:.18s; cursor:default; }
.proc-step:last-child{ border-right:0; }
.proc-step:hover{ background:var(--teal-s); }
.ps-num{ width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--navy); font-size:16px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.ps-icon{ width:32px; height:32px; margin:0 auto 6px; color:var(--teal); }
.ps-icon i{ width:32px; height:32px; }
.ps-title{ font-size:14px; font-weight:900; color:var(--ink); margin-bottom:5px; }
.ps-desc{ font-size:12px; color:var(--muted); line-height:1.6; }

/* ══════════════════════════
   MAGAZINE (홈)
══════════════════════════ */
.magazine-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mag-card{ cursor:pointer; transition:.18s; }
.mag-card:hover{ transform:translateY(-4px); }
.mag-img{ height:200px; border-radius:var(--r-lg); overflow:hidden; background:var(--off-2); margin-bottom:16px; }
.mag-img img{ transition:.6s ease; }
.mag-card:hover .mag-img img{ transform:scale(1.04); }
.mag-tag{ display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:var(--r-pill); background:var(--gold-s); color:var(--gold-d); font-size:10px; font-weight:800; margin-bottom:10px; }
.mag-title{ font-size:16px; font-weight:900; color:var(--ink); margin-bottom:7px; letter-spacing:-.02em; line-height:1.4; }
.mag-desc{ font-size:13px; color:var(--muted); line-height:1.65; }

/* ══════════════════════════
   About CTA
══════════════════════════ */
.about-cta{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; border-radius:var(--r-lg); overflow:hidden; }
.about-cta-img{ background:var(--off-2); min-height:360px; overflow:hidden; }
.about-cta-img img{ height:100%; object-fit:cover; filter:brightness(.95); transition:.6s; }
.about-cta:hover .about-cta-img img{ transform:scale(1.03); }
.about-cta-body{ background:var(--navy); padding:52px 48px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.about-cta-body::before{ content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:var(--teal); opacity:.08; filter:blur(40px); top:-40px; right:-40px; pointer-events:none; }
.about-cta-body > *{ position:relative; z-index:1; }
.acb-tag{ display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); font-size:11px; font-weight:700; margin-bottom:16px; width:fit-content; }
.acb-title{ font-size:28px; font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1.25; margin-bottom:14px; }
.acb-desc{ font-size:14px; color:rgba(255,255,255,.65); line-height:1.75; margin-bottom:28px; }
.acb-slogan{ font-size:16px; font-weight:900; color:var(--gold); letter-spacing:-.02em; }

/* ══════════════════════════
   CLIENTS 마퀴
══════════════════════════ */
.clients-section{ padding:52px 0; background:var(--off); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.clients-label{ text-align:center; font-size:11px; font-weight:800; color:var(--dim); text-transform:uppercase; letter-spacing:.14em; margin-bottom:24px; }
.marquee-wrap{ overflow:hidden; }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marqueeScroll 28s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marqueeScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.marquee-item{ display:flex; align-items:center; justify-content:center; width:160px; height:60px; flex-shrink:0; border-right:1px solid var(--line); padding:0 24px; filter:grayscale(1) opacity(.55); transition:.18s; }
.marquee-item:hover{ filter:grayscale(0) opacity(1); }
.marquee-item span{ font-size:14px; font-weight:800; color:var(--ink); text-align:center; white-space:nowrap; }

/* ══════════════════════════
   홈 인터랙션
══════════════════════════ */
.tilt-card{ transform-style:preserve-3d; will-change:transform; }
.tilt-shine{ position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.12) 0%,transparent 65%); pointer-events:none; opacity:0; transition:opacity .2s; z-index:2; }
.tilt-card:hover .tilt-shine{ opacity:1; }
@keyframes tagBounce{ 0%{ transform:scale(1); } 25%{ transform:scale(.88); } 55%{ transform:scale(1.16); } 80%{ transform:scale(.97); } 100%{ transform:scale(1); } }
.keyword-tags span.bouncing{ animation:tagBounce .36s ease; border-color:var(--teal); color:var(--teal); background:var(--teal-s); }
@keyframes wobble{ 0%,100%{ transform:rotate(0) scale(1); } 20%{ transform:rotate(-12deg) scale(1.1); } 45%{ transform:rotate(9deg) scale(1.12); } 65%{ transform:rotate(-5deg) scale(1.06); } 80%{ transform:rotate(3deg); } }
.cat-card:hover .wobble-icon{ animation:wobble .48s ease; }
@keyframes mascotFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 40%{ transform:translateY(-5px) rotate(-4deg); } 70%{ transform:translateY(2px) rotate(2deg); } }

/* ══════════════════════════
   홈 반응형
══════════════════════════ */
@media(max-width:1100px){
    .hero-grid{ grid-template-columns:1fr; gap:36px; }
    .board-card{ transform:none; max-width:520px; }
    .hero-copy h1{ font-size:48px; }
    .service-grid{ grid-template-columns:1fr 1fr; }
    .cat-grid{ grid-template-columns:repeat(3,1fr); }
    .portfolio-grid{ grid-template-columns:1fr 1fr; }
    .process-steps{ grid-template-columns:repeat(3,1fr); }
    .proc-step:nth-child(3){ border-right:0; }
    .proc-step:nth-child(4){ border-top:1px solid var(--line); }
    .about-cta{ grid-template-columns:1fr; }
    .about-cta-img{ min-height:260px; }
    .highlight-grid{ grid-template-columns:1fr 1fr; }
    .company-section-wrap{ grid-template-columns:1fr; }
}
@media(max-width:720px){
    .hero-copy h1{ font-size:36px; }
    .hero{ padding:56px 0 52px; }
    .promo-strip-inner{ flex-direction:column; }
    .ps-divider{ width:100%; height:1px; margin:0; }
    .service-grid,.company-grid,.magazine-grid,.portfolio-grid{ grid-template-columns:1fr; }
    .cat-grid{ grid-template-columns:repeat(2,1fr); }
    .process-steps{ grid-template-columns:1fr 1fr; }
    .proc-step:nth-child(5){ grid-column:span 2; border-top:1px solid var(--line); }
    .highlight-grid{ grid-template-columns:1fr 1fr; }
    .about-cta-body{ padding:36px 28px; }
    .acb-title{ font-size:22px; }
    .company-section-wrap{ grid-template-columns:1fr; }
}


/* ══════════════════════════════════════════
   HERO v4 추가 스타일
══════════════════════════════════════════ */

/* hero-inner: flex → block 으로 덮어써서 grid가 inner 안에서 정상 작동 */
.hero-inner{
    display:block !important;
    text-align:left !important;
    gap:0 !important;
}

/* v4 그리드 */
.hero-v4-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:48px;
    align-items:center;
    width:100%;
    padding:60px 0;
}

/* 좌측 */
.hero-v4-left{ display:flex; flex-direction:column; text-align:left; }

/* 설명 */
.hero-v4-desc{
    font-size:15px; font-weight:500; line-height:1.75;
    color:rgba(255,255,255,.85);
    margin:16px 0 28px;
}

/* 검색창 */
.hv4-search-row{
    display:flex; align-items:center; height:54px;
    padding:0 6px 0 22px;
    background:rgba(255,255,255,.96);
    border:2px solid transparent;
    border-radius:var(--r-pill);
    box-shadow:0 8px 32px rgba(0,0,0,.18);
    margin-bottom:14px;
    transition:.2s;
}
.hv4-search-row:focus-within{ border-color:var(--gold); background:#fff; }
.hv4-search-row input{
    flex:1; border:none; background:transparent; outline:none;
    font-size:16px; font-weight:600; color:var(--ink);
    font-family:var(--sans);
}
.hv4-search-row input::placeholder{ color:var(--dim); font-size:15px; }
.hv4-search-row button{
    width:42px; height:42px; border:none; border-radius:50%;
    background:var(--teal); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:.15s;
}
.hv4-search-row button:hover{ background:var(--gold); color:var(--navy); }
.hv4-search-row button i{ width:18px; height:18px; }

/* 키워드 태그 */
.hero-v4-search .keyword-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.hero-v4-search .keyword-tags span{
    display:inline-flex; align-items:center; height:28px; padding:0 13px;
    border-radius:var(--r-pill); border:1.5px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.18); color:#fff;
    font-size:12px; font-weight:800; cursor:pointer; transition:.15s;
}
.hero-v4-search .keyword-tags span:hover{
    background:rgba(255,255,255,.32); border-color:#fff;
}

/* 우측: 슬라이더 */
.hero-v4-right{ position:relative; }
.hero-slider{
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 20px 48px rgba(0,0,0,.22);
    min-height:260px; position:relative;
}
.hero-slide{ display:none; padding:24px 22px 70px; min-height:260px; position:relative; }
.hero-slide.active{ display:block; }
.slide-badge{
    display:inline-flex; align-items:center; height:22px; padding:0 11px;
    border-radius:var(--r-pill); background:var(--teal); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:.06em; margin-bottom:10px;
}
.slide-sub{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:7px; }
.slide-title{ font-size:19px; font-weight:900; color:var(--ink); line-height:1.35; letter-spacing:-.03em; margin-bottom:10px; }
.slide-title em{ font-style:normal; color:var(--teal); }
.slide-period{ font-size:11px; color:var(--dim); }
.slide-deco{
    position:absolute; right:16px; bottom:46px;
    font-size:34px; font-weight:900; color:var(--gold);
    letter-spacing:-.04em; line-height:1; text-align:center;
}
.slide-deco span{ display:block; font-size:9px; font-weight:800; color:var(--muted); letter-spacing:.06em; margin-top:2px; }

/* 슬라이더 컨트롤 */
.slider-controls{
    position:absolute; bottom:0; left:0; right:0;
    display:flex; align-items:center; gap:4px; padding:8px 12px;
    background:var(--off); border-top:1px solid var(--line);
    border-radius:0 0 16px 16px;
}
.slider-prev,.slider-next,.slider-pause{
    width:26px; height:26px; border:none; background:transparent;
    border-radius:6px; color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:.15s;
}
.slider-prev:hover,.slider-next:hover,.slider-pause:hover{ background:var(--teal-s); color:var(--teal); }
.slider-prev i,.slider-next i,.slider-pause i{ width:13px; height:13px; }
.slider-dots{ flex:1; display:flex; justify-content:center; gap:6px; }
.sdot{ width:7px; height:7px; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:.2s; padding:0; }
.sdot.active{ background:var(--teal); width:18px; border-radius:4px; }

/* 카테고리 띠 */
.hero-cat-strip{ background:#fff; border-bottom:1px solid var(--line); }
.hero-cat-row{ display:flex; align-items:stretch; }
.hero-cat-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:18px 8px; text-decoration:none; color:var(--ink);
    border-right:1px solid var(--line); transition:.15s;
}
.hero-cat-item:last-child{ border-right:0; }
.hero-cat-item:hover{ background:var(--teal-s); }
.hero-cat-item:hover .hci-name{ color:var(--teal); }
.hero-cat-item:hover .hci-icon i{ color:var(--teal); }
.hci-icon{
    width:42px; height:42px; border-radius:50%; background:var(--off);
    display:flex; align-items:center; justify-content:center; transition:.15s;
}
.hero-cat-item:hover .hci-icon{ background:rgba(0,180,188,.12); }
.hci-icon i{ width:19px; height:19px; color:var(--muted); transition:.15s; }
.hci-more{ background:var(--navy) !important; }
.hci-more i{ color:#fff !important; }
.hero-cat-item:hover .hci-more{ background:var(--teal) !important; }
.hci-name{ font-size:11px; font-weight:800; color:var(--text); transition:.15s; }

/* 반응형 */
@media(max-width:1100px){
    .hero-v4-grid{ grid-template-columns:1fr; gap:28px; padding:48px 0; }
    .hero-v4-right{ max-width:480px; }
}
@media(max-width:720px){
    .hero-v4-right{ max-width:100%; }
    .hero-cat-row{ flex-wrap:wrap; }
    .hero-cat-item{ width:25%; flex:none; border-bottom:1px solid var(--line); }
    .hero-cat-item:nth-child(4n){ border-right:0; }
}

/* ══════════════════════════════════════════
   HERO v4 — 탐색 중심 레이아웃
══════════════════════════════════════════ */

/* hero 구조 */
.hero{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    min-height:calc(100vh - 108px) !important;
    padding:0 !important;
}
.hero .inner{
    width:min(var(--container), calc(100% - 48px)) !important;
    margin:0 auto !important;
}
.hero-v4-body{
    display:flex; align-items:center;
    padding:52px 0; position:relative; z-index:1;
}
.hero-v4-body .inner{ width:100%; }

/* 그리드: 좌 탐색그룹 / 우 슬라이더 */
.hero-v4-grid{
    display:grid;
    grid-template-columns:3fr 2fr;
    gap:40px;
    align-items:center;
    width:100%;
}

/* ── 좌측: 탐색 그룹 ── */
.hero-v4-left{
    display:flex; flex-direction:column;
    text-align:left; gap:0;
}

/* 설명 */
.hero-v4-desc{
    font-size:16px; font-weight:600;
    color:rgba(255,255,255,.95);
    margin:14px 0 22px;
    line-height:1.7;
}

/* 검색창 */
.hv4-search-row{
    display:flex; align-items:center; height:56px;
    padding:0 6px 0 22px;
    background:rgba(255,255,255,.97);
    border:2px solid transparent;
    border-radius:var(--r-pill);
    box-shadow:0 6px 24px rgba(0,0,0,.15);
    margin-bottom:12px; transition:.2s;
}
.hv4-search-row:focus-within{ border-color:var(--gold); background:#fff; }
.hv4-search-row input{
    flex:1; border:none; background:transparent; outline:none;
    font-size:16px; font-weight:600; color:var(--ink); font-family:var(--sans);
}
.hv4-search-row input::placeholder{ color:#999; font-weight:500; }
.hv4-search-row button{
    width:44px; height:44px; border:none; border-radius:50%;
    background:var(--teal); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:.15s;
}
.hv4-search-row button:hover{ background:var(--gold); color:var(--navy); }
.hv4-search-row button i{ width:18px; height:18px; }

/* 키워드 태그 */
.hero-v4-search .keyword-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.hero-v4-search .keyword-tags span{
    display:inline-flex; align-items:center; height:28px; padding:0 13px;
    border-radius:var(--r-pill);
    border:1.5px solid rgba(255,255,255,.65);
    background:rgba(255,255,255,.26);
    color:#fff; font-size:12px; font-weight:800;
    cursor:pointer; transition:.15s;
}
.hero-v4-search .keyword-tags span:hover{
    background:rgba(255,255,255,.4); border-color:#fff;
}

/* 카테고리 아이콘 (좌측 하단) */
.hero-cat-row{
    display:flex; align-items:flex-start;
    gap:0; margin-top:20px;
}
.hero-cat-item{
    flex:none; display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:0 10px; text-decoration:none; background:transparent; border:none; transition:.18s;
}
.hero-cat-item:first-child{ padding-left:0; }
.hero-cat-item:hover .hci-icon{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.hci-icon{
    width:50px; height:50px; border-radius:14px;
    background:rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,.12); transition:.2s;
}
.hci-icon .hci-c{ width:22px; height:22px; }
.hci-more{ background:rgba(255,255,255,.92) !important; }
.hero-cat-item:hover .hci-more{ background:#fff !important; }
.hci-name{
    font-size:11px; font-weight:800;
    color:#274b6b;
    text-shadow:none;
}

/* ── 우측: 슬라이더 (보조) ── */
.hero-v4-right{ position:relative; display:flex; flex-direction:column; }
.hero-slider{
    flex:1; background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
    position:relative; min-height:280px;
}
.hero-slide{ display:none; position:absolute; inset:0; padding:24px 22px 68px; }
.hero-slide.active{ display:flex; flex-direction:column; }
.slide-badge{
    display:inline-flex; align-items:center; height:22px; padding:0 11px;
    border-radius:var(--r-pill); background:var(--teal); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:.06em;
    margin-bottom:10px; align-self:flex-start;
}
.slide-sub{ font-size:13px; color:#555; font-weight:600; margin-bottom:7px; }
.slide-title{ font-size:19px; font-weight:900; color:var(--ink); line-height:1.35; letter-spacing:-.03em; }
.slide-title em{ font-style:normal; color:var(--teal); }
.slide-period{ font-size:12px; color:#666; margin-top:10px; }
.slide-deco{
    position:absolute; right:18px; bottom:74px;
    font-size:38px; font-weight:900; color:var(--gold);
    letter-spacing:-.04em; line-height:1; text-align:center;
}
.slide-deco span{ display:block; font-size:10px; font-weight:800; color:var(--muted); letter-spacing:.06em; margin-top:2px; }
.slider-controls{
    position:absolute; bottom:0; left:0; right:0;
    display:flex; align-items:center; gap:4px; padding:9px 12px;
    background:var(--off); border-top:1px solid var(--line); border-radius:0 0 14px 14px;
}
.slider-prev,.slider-next,.slider-pause{
    width:26px; height:26px; border:none; background:transparent;
    border-radius:6px; color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:.15s;
}
.slider-prev:hover,.slider-next:hover,.slider-pause:hover{ background:var(--teal-s); color:var(--teal); }
.slider-prev i,.slider-next i,.slider-pause i{ width:13px; height:13px; }
.slider-dots{ flex:1; display:flex; justify-content:center; gap:6px; }
.sdot{ width:7px; height:7px; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:.2s; padding:0; }
.sdot.active{ background:var(--teal); width:18px; border-radius:4px; }

/* 반응형 */
@media(max-width:1100px){
    .hero-v4-grid{ grid-template-columns:1fr; gap:28px; }
    .hero-slider{ min-height:200px; }
}
@media(max-width:720px){
    .hero-cat-row{ flex-wrap:wrap; }
    .hero-cat-item{ width:25%; padding:0 4px; }
    .hero-cat-item:first-child{ padding-left:4px; }
}


/* ══════════════════════════════════════════
   HERO — 크몽 컨셉, 높이 제한 없음
══════════════════════════════════════════ */

/* 히어로 전체 */
.hero{
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='600'%3E%3Cpath d='M0 300 C 240 220,480 380,720 300 C 960 220,1200 380,1440 300' fill='none' stroke='%2300b4bc' stroke-width='1.5' stroke-opacity='.14'/%3E%3Cpath d='M0 360 C 240 280,480 440,720 360 C 960 280,1200 440,1440 360' fill='none' stroke='%2300b4bc' stroke-width='1' stroke-opacity='.09'/%3E%3Cpath d='M0 240 C 240 160,480 320,720 240 C 960 160,1200 320,1440 240' fill='none' stroke='%23E9B93A' stroke-width='1' stroke-opacity='.12'/%3E%3Cpath d='M0 420 C 240 340,480 500,720 420 C 960 340,1200 500,1440 420' fill='none' stroke='%23E9B93A' stroke-width='.8' stroke-opacity='.07'/%3E%3C/svg%3E") no-repeat center/100% 100%,
        radial-gradient(ellipse 55% 70% at 98% 45%, rgba(0,180,188,.09) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 2% 95%, rgba(233,185,58,.08) 0%, transparent 55%),
        #fff;
    border-bottom:1px solid #e4f2f2;
    padding:0;
    /* 높이 제한 없음 — 콘텐츠 따라 자연스럽게 */
    min-height:auto;
    display:block;
    overflow:visible;
}

.hero .inner{
    width:min(var(--container), calc(100% - 48px));
    margin:0 auto;
}

/* 2단 그리드 */
.hero-grid{
    display:grid;
    grid-template-columns:1fr 400px;
    gap:48px;
    align-items:center;
    padding:32px 0 48px;
}

/* 좌측 */
.hero-left{ display:flex; flex-direction:column; }

.hero-eyebrow{
    font-size:12px; font-weight:700; color:var(--teal);
    letter-spacing:.06em; text-transform:uppercase;
    margin:0 0 16px;
    display:flex; align-items:center; gap:6px;
}
.hero-eyebrow::before{
    content:''; width:20px; height:2px; background:var(--teal); border-radius:2px;
}

.hero-title{
    font-size:60px; font-weight:900;
    line-height:1.1; letter-spacing:-.045em;
    color:#111; margin:0 0 18px;
}
.hero-title em{ font-style:normal; color:var(--teal); }

.hero-desc{
    font-size:15px; color:#777; font-weight:400;
    line-height:1.8; margin:0 0 32px;
}

/* 검색박스 */
.hero-search-box{ margin-bottom:28px; }
.hsb-input-row{
    display:flex; align-items:center;
    border:2px solid #e4e4e4; border-radius:var(--r-pill);
    padding:6px 6px 6px 20px; background:#fff;
    box-shadow:0 4px 24px rgba(0,0,0,.07);
    transition:.2s; margin-bottom:12px;
}
.hsb-input-row:focus-within{
    border-color:var(--teal);
    box-shadow:0 4px 28px rgba(0,180,188,.16);
}
.hsb-ico{ width:18px; height:18px; color:#ccc; flex-shrink:0; margin-right:10px; }
.hsb-input-row input{
    flex:1; border:none; background:transparent; outline:none;
    font-size:16px; font-weight:400; color:#111; font-family:var(--sans);
}
.hsb-input-row input::placeholder{ color:#c8c8c8; }
.hsb-btn{
    height:46px; padding:0 24px; border:none; border-radius:var(--r-pill);
    background:var(--teal); color:#fff;
    font-size:14px; font-weight:800; font-family:var(--sans);
    cursor:pointer; flex-shrink:0; white-space:nowrap; transition:.15s;
}
.hsb-btn:hover{ background:var(--teal-d); }

.hsb-suggest{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hsb-suggest > span{
    font-size:12px; color:#aaa; font-weight:600; white-space:nowrap;
}
.hsb-suggest button{
    height:28px; padding:0 12px; border-radius:var(--r-pill);
    border:1px solid #e8e8e8; background:#fafafa; color:#555;
    font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans);
    transition:.15s;
}
.hsb-suggest button:hover{
    border-color:var(--teal); color:var(--teal); background:var(--teal-s);
}

/* 통계 */
.hero-stats{
    display:flex; align-items:center; gap:24px;
}
.hstat{ text-align:center; }
.hstat strong{
    display:block; font-size:26px; font-weight:900;
    color:#111; letter-spacing:-.03em; line-height:1;
    margin-bottom:4px;
}
.hstat strong span{ font-size:16px; color:var(--teal); }
.hstat p{ font-size:11px; color:#aaa; font-weight:600; margin:0; }
.hstat-div{ width:1px; height:36px; background:#e8e8e8; }

/* 우측: 슬라이더 */
.hero-right{ position:relative; }
.hero-slide-wrap{
    display:flex; flex-direction:column;
}
.hero-slider{
    border-radius:20px 20px 0 0; overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.10);
    position:relative; min-height:400px;
    background:#f0fafa;
    flex:1;
}
.hero-slide{
    display:none; position:absolute; inset:0;
    align-items:stretch;
}
.hero-slide.active{ display:flex; }
.hs-inner{
    flex:1; padding:0;
    display:flex; flex-direction:column;
    background:#fff;
}
.hs-deco{
    width:120px; flex-shrink:0;
    background:linear-gradient(160deg, var(--teal-075), var(--teal-025));
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    font-size:2.6rem; font-weight:900; color:var(--teal-800);
    letter-spacing:-.04em; line-height:1;
    border-left:1px solid var(--teal-100);
}
.hs-deco span{
    display:block; font-size:9px; font-weight:800;
    color:var(--teal-400); letter-spacing:.1em; margin-top:4px;
}

.slide-badge{
    display:inline-flex; align-items:center; height:22px; padding:0 10px;
    border-radius:var(--r-pill); background:var(--teal); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:.04em;
    margin-bottom:12px; width:fit-content;
}
.slide-badge--navy{ background:var(--navy); }
.slide-badge--gold{ background:var(--gold); color:var(--navy); }

.slide-eyebrow{ font-size:12px; color:#aaa; font-weight:600; margin:0 0 8px; }
.slide-title{
    font-size:20px; font-weight:900; color:#111;
    line-height:1.38; letter-spacing:-.02em;
    margin:0 0 auto; padding-bottom:12px;
}
.slide-title em{ font-style:normal; color:var(--teal); }
.slide-period{ font-size:11px; color:#bbb; margin:0 0 14px; }
.slide-cta{
    display:inline-flex; align-items:center;
    font-size:13px; font-weight:700; color:var(--teal);
    text-decoration:none; transition:.15s;
}
.slide-cta:hover{ color:var(--teal-d); gap:4px; }

/* 슬라이더 컨트롤 */
.slider-controls{
    position:static;
    display:flex; align-items:center; gap:4px;
    padding:10px 16px;
    background:#f4f4f4; border:1px solid #eee; border-top:none;
    border-radius:0 0 20px 20px;
}
.slider-prev,.slider-next,.slider-pause{
    width:28px; height:28px; border:none; background:transparent;
    border-radius:6px; color:#ccc; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:.15s;
}
.slider-prev:hover,.slider-next:hover,.slider-pause:hover{ background:#f0f0f0; color:#555; }
.slider-prev i,.slider-next i,.slider-pause i{ width:14px; height:14px; }
.slider-dots{ flex:1; display:flex; justify-content:center; gap:6px; }
.sdot{ width:6px; height:6px; border-radius:50%; border:none; background:#ddd; cursor:pointer; transition:.2s; padding:0; }
.sdot.active{ background:var(--teal); width:18px; border-radius:4px; }

/* 카테고리 */
.hero-cats{
    display:flex; align-items:stretch;
    border-top:1px solid #f0f0f0;
    padding:0;
}
.hcat{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:20px 6px; text-decoration:none; transition:.15s;
    border-right:none; border-radius:0;
}
.hcat:hover{ background:#fafcfc; }
.hcat:hover .hcat-name{ color:var(--teal); }
.hcat:hover .hcat-icon{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.hcat-icon{
    width:54px; height:54px; border-radius:16px;
    background:color-mix(in srgb, var(--c) 10%, #fff);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.07); transition:.2s;
}
.hcat-icon i{ width:24px; height:24px; color:var(--c); stroke:var(--c); }
.hcat--more .hcat-icon{ background:#f3f4f6; }
.hcat--more .hcat-icon i{ color:#9ca3af; stroke:#9ca3af; }
.hcat-name{ font-size:12px; font-weight:700; color:#666; transition:.15s; white-space:nowrap; }

@media(max-width:1100px){
    .hero-grid{ grid-template-columns:1fr; gap:32px; padding:48px 0 32px; }
    .hero-right{ max-width:480px; }
}
@media(max-width:768px){
    .hero-title{ font-size:40px; }
    .hero-cats{ flex-wrap:wrap; }
    .hcat{ width:33.33%; flex:none; }
}

/* ── 제목 2줄 + 신뢰 블록 ── */

/* 제목 크기 키워서 2줄로도 볼륨 유지 */
.hero-title{ font-size:66px !important; }

/* 신뢰 블록 — 검색박스 하단에 자연스럽게 연결 */
.hero-trust{
    display:flex; align-items:center; gap:0;
    padding:14px 20px;
    background:#f8fffe;
    border:1px solid #e4f2f2;
    border-top:none;
    border-radius:0 0 16px 16px;
    margin-top:-2px;
}
.htrust-item{
    display:flex; align-items:center; gap:8px;
    flex:1; padding:0 4px;
}
.htrust-item i{ width:15px; height:15px; color:var(--teal); flex-shrink:0; }
.htrust-item span{ font-size:12px; color:#666; line-height:1.4; }
.htrust-item strong{ color:#111; font-weight:800; }
.htrust-div{ width:1px; height:28px; background:#ddeeed; flex-shrink:0; }

/* 검색박스 하단 radius 제거 (신뢰블록이 붙으므로) */
.hsb-input-row{ border-radius:var(--r-pill) var(--r-pill) 0 0 !important; margin-bottom:0 !important; }
.hsb-suggest{ padding:10px 20px 14px; background:#fff; border:1px solid #e4e4e4; border-top:none; margin-bottom:0; }

/* ── 검색창 원상복구 ── */
.hsb-input-row{
    border-radius:var(--r-pill) !important;
    margin-bottom:12px !important;
}
.hsb-suggest{
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    border-top:none !important;
    margin-bottom:0 !important;
}
/* 신뢰블록 검색창 분리 — 독립 영역으로 */
.hero-trust{
    border-radius:12px !important;
    border-top:1px solid #e4f2f2 !important;
    margin-top:28px !important;
}

/* ── 슬라이더 프레임 — 콘텐츠가 꽉 채움 ── */
.hero-slide-wrap{
    display:flex;
    flex-direction:column;
    position:relative;
}
.hero-slider{
    border-radius:20px 20px 0 0 !important;
    overflow:hidden !important;
    box-shadow:0 12px 40px rgba(0,0,0,.10) !important;
    position:relative !important;
    min-height:400px !important;
    background:#f4f8f8 !important;
    flex:1;
}
/* 슬라이드 자체가 프레임 — 패딩 없음, 이미지/콘텐츠가 꽉 채움 */
.hero-slide{
    display:none !important;
    position:absolute !important;
    inset:0 !important;
    overflow:hidden !important;
}
.hero-slide.active{ display:block !important; }

/* hs-body — 에디터에서 직접 수정할 내부 레이어 */
.hs-body{
    position:absolute !important;
    inset:0 !important;
    padding:32px 28px !important;
    display:flex !important;
    flex-direction:column !important;
    /* 배경 이미지 쓸 때: background:url(...) center/cover no-repeat; */
    background:#fff !important;
}
/* 이미지 배경 쓸 때 텍스트 보호용 오버레이 예시:
   .hero-slide { background:url(...) center/cover; }
   .hs-body { background:linear-gradient(to right, rgba(255,255,255,.92) 50%, transparent); }
*/

/* 컨트롤 — 슬라이더 바깥 아래 */
.slider-controls{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    padding:10px 16px !important;
    background:#f4f4f4 !important;
    border:1px solid #eee !important;
    border-top:none !important;
    border-radius:0 0 20px 20px !important;
}
.hs-deco{ display:none !important; }