/* HOMI 공통 헤더 — 3개 사이트(factory · market · production)가 같은 컴포넌트를 쓰고 색·톤만 다르게 (FR-COM-001)
   사용: <body data-site="market" data-page="home"> + <header id="homi-header"></header> + homi-header.js */

/* ── 사이트별 색·톤 ─────────────────────────────── */
.hh{
  --hh-h:72px;
  --hh-bg:#FFFFFF;
  --hh-ink:#1B1A18;          /* 메뉴 글자 */
  --hh-muted:#55525C;
  --hh-line:#EEEEEE;
  --hh-accent:#141414;       /* 밑줄 · 강조 */
  --hh-accent-hover:#3A3A3A;
  --hh-accent-soft:#F6F6F6;
  --hh-on-accent:#FFFFFF;
  --hh-font:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --hh-font-en:'Inter','Pretendard','Noto Sans KR',system-ui,sans-serif;
}
.hh[data-site="factory"]{ --hh-accent:#FF6B00; --hh-accent-hover:#CC5500; --hh-accent-soft:#FFF1E6; --hh-line:#E7E7EC; }
.hh[data-site="production"]{ --hh-accent:#FF6B00; --hh-accent-hover:#CC5500; --hh-accent-soft:#FFF1E6; --hh-line:#E7E7EC; }

/* ── 자리 확보 (스크립트가 그리기 전 흔들림 방지) ── */
#homi-header{display:block;min-height:var(--hh-h,72px)}
html{scroll-padding-top:calc(var(--hh-h,72px) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── 레이아웃: 로고 좌 · 메뉴 중앙 · 언어/형제 링크 우 ── */
.hh{position:sticky;top:0;z-index:1000;background:var(--hh-bg);border-bottom:1px solid var(--hh-line);font-family:var(--hh-font);color:var(--hh-ink);-webkit-font-smoothing:antialiased}
.hh *{box-sizing:border-box}
.hh a{text-decoration:none;color:inherit}
.hh-in{max-width:1440px;height:var(--hh-h);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.hh-left{justify-self:start;display:flex;align-items:center}
.hh-center{justify-self:center;height:100%}
.hh-right{justify-self:end;display:flex;align-items:center;gap:8px}

/* 로고 */
.hh-logo{display:inline-flex;align-items:center;gap:10px;color:var(--hh-ink);border-radius:8px;padding:4px 2px}
.hh-logo img{width:26px;height:auto;display:block}
.hh-logo-text{font-family:var(--hh-font-en);font-weight:900;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.hh-logo-text span{font-weight:900}

/* 중앙 메뉴 */
.hh-menu{display:flex;align-items:stretch;gap:36px;height:100%;margin:0;padding:0;list-style:none}
.hh-menu>li{display:flex;align-items:center;position:relative}
.hh-link{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:5px;height:100%;
  font-family:var(--hh-font-en);font-size:16px;font-weight:600;color:var(--hh-ink);white-space:nowrap;transition:color .15s}
.hh-link:hover{color:var(--hh-accent)}
.hh-link:focus-visible{outline:2px solid var(--hh-accent);outline-offset:4px;border-radius:4px}
/* 현재 메뉴 — 밑줄 (FR-COM-003) */
.hh-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--hh-accent);transform:scaleX(0);transition:transform .2s ease}
.hh-link.is-current{font-weight:700}
.hh-link.is-current::after{transform:scaleX(1)}
.hh-caret{font-size:10px;transition:transform .2s;display:inline-block}
.hh-has-mega.open .hh-caret{transform:rotate(180deg)}

/* 오른쪽: 언어 · 형제 링크 · CTA */
.hh-lang{position:relative}
.hh-lang-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--hh-line);border-radius:999px;
  font-family:var(--hh-font-en);font-size:13px;font-weight:600;color:var(--hh-ink)}
.hh-lang-btn:hover{border-color:var(--hh-accent)}
.hh-lang-btn:focus-visible{outline:2px solid var(--hh-accent);outline-offset:2px}
.hh-lang-btn svg{width:15px;height:15px}
.hh-lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;width:max-content;background:#fff;border:1px solid var(--hh-line);border-radius:12px;box-shadow:0 12px 32px rgba(25,25,25,.12);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s;margin:0;list-style:none}
.hh-lang.open .hh-lang-menu{opacity:1;visibility:visible;transform:none}
.hh-lang-menu a{display:block;padding:9px 14px;white-space:nowrap;border-radius:8px;font-size:14px;color:var(--hh-ink)}
.hh-lang-menu a:hover,.hh-lang-menu a:focus-visible{background:var(--hh-accent-soft);outline:none}
.hh-lang-menu a[aria-current="true"]{font-weight:700;color:var(--hh-accent)}
.hh-sib{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 10px;border-radius:8px;font-family:var(--hh-font-en);font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--hh-ink);white-space:nowrap}
.hh-sib:hover{color:var(--hh-accent)}
.hh-sib:focus-visible{outline:2px solid var(--hh-accent);outline-offset:2px}
.hh-cta{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:var(--hh-accent);color:var(--hh-on-accent)!important;font-size:14px;font-weight:700;white-space:nowrap;transition:background .15s}
.hh-cta:hover{background:var(--hh-accent-hover)}
.hh-cta:focus-visible{outline:3px solid var(--hh-accent-soft);outline-offset:2px}

/* ── 서비스 ▾ 메가 메뉴 (FR-MKT-029) ── */
.hh-mega{position:fixed;left:50%;top:var(--hh-bottom,72px);width:min(980px,calc(100vw - 48px));transform:translate(-50%,-6px);padding-top:10px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;z-index:1001}
.hh-has-mega.open .hh-mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hh-mega-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--hh-line);border-radius:18px;box-shadow:0 24px 60px rgba(50,50,50,.12);padding:26px 0}
.hh-col{padding:0 28px;border-left:1px solid #E7E4EC}
.hh-col:first-child{border-left:0}
.hh-col-title{display:inline-block;font-size:13px;font-weight:600;color:var(--hh-muted);margin:0 0 12px}
a.hh-col-title:hover{color:var(--hh-accent)}
a.hh-col-title:focus-visible{outline:2px solid var(--hh-accent);outline-offset:2px;border-radius:4px}
.hh-mi{display:flex;gap:14px;align-items:flex-start;padding:10px;margin:0 -10px 2px;border-radius:12px;transition:background .15s}
.hh-mi:hover,.hh-mi:focus-visible{background:#F8F8F8;outline:none}
.hh-ic{width:40px;height:40px;flex-shrink:0;border-radius:11px;background:var(--hh-accent-soft);color:var(--hh-accent);display:grid;place-items:center}
.hh-ic svg{width:20px;height:20px}
.hh-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.hh-lb{font-size:13px;font-weight:600;color:var(--hh-accent);line-height:1.35}
.hh-gl{font-size:15px;font-weight:700;color:#141318;line-height:1.45;letter-spacing:-.02em;word-break:keep-all}

/* ── 모바일 ── */
.hh-burger{all:unset;box-sizing:border-box;cursor:pointer;display:none;width:42px;height:42px;border-radius:10px;place-items:center}
.hh-burger:focus-visible{outline:2px solid var(--hh-accent)}
.hh-burger span{display:block;width:22px;height:2px;background:var(--hh-ink);border-radius:2px;position:relative;transition:.2s}
.hh-burger span::before,.hh-burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--hh-ink);border-radius:2px;transition:.2s}
.hh-burger span::before{top:-7px}.hh-burger span::after{top:7px}
.hh-burger[aria-expanded="true"] span{background:transparent}
.hh-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hh-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.hh-panel{position:fixed;left:0;right:0;top:var(--hh-bottom,60px);bottom:0;background:#fff;overflow-y:auto;padding:8px 20px 40px;z-index:999;display:none}
.hh-panel.open{display:block}
.hh-plink,.hh-pacc{all:unset;box-sizing:border-box;cursor:pointer;display:flex;width:100%;justify-content:space-between;align-items:center;padding:16px 4px;font-size:17px;font-weight:700;color:var(--hh-ink);border-bottom:1px solid #F0EEF3}
.hh-plink.is-current,.hh-pacc.is-current{color:var(--hh-accent)}
.hh-plink.is-current span,.hh-pacc.is-current .hh-ptxt{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.hh-pacc[aria-expanded="true"] .hh-caret{transform:rotate(180deg)}
.hh-psub{display:none;padding:4px 0 12px;border-bottom:1px solid #F0EEF3}
.hh-psub.open{display:block}
.hh-psub .hh-col{padding:0;border:0;margin-top:10px}
.hh-psub .hh-mi{margin:0;padding:10px 4px}
.hh-pfoot{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.hh-plang{display:flex;gap:8px;flex-wrap:wrap}
.hh-plang a{padding:8px 14px;border:1px solid var(--hh-line);border-radius:999px;font-size:14px;font-weight:600}
.hh-plang a[aria-current="true"]{border-color:var(--hh-accent);color:var(--hh-accent)}
.hh-pfoot .hh-sib{padding:0 4px}
.hh-pfoot .hh-cta{justify-content:center;height:50px}

@media (max-width:1100px){
  .hh-menu{gap:24px}
  .hh-in{padding:0 20px;gap:16px}
}
@media (max-width:900px){
  .hh{--hh-h:60px}
  .hh-in{grid-template-columns:1fr auto;padding:0 16px}
  .hh-center,.hh-lang,.hh-right .hh-sib{display:none}
  .hh-burger{display:grid}
  .hh-cta{height:38px;padding:0 14px;font-size:13px}
  .hh-logo-text{font-size:17px}
}
@media (max-width:360px){.hh-right .hh-cta{display:none}}
@media (prefers-reduced-motion:reduce){.hh *,.hh *::after{transition:none!important}}

/* 서비스 카드 위치로 이동했을 때 잠깐 강조 */
.hh-target{animation:hhPulse 1.8s ease-out 1}
@keyframes hhPulse{0%{box-shadow:0 0 0 0 rgba(20,20,20,.55)}100%{box-shadow:0 0 0 14px rgba(20,20,20,0)}}
@media (prefers-reduced-motion:reduce){.hh-target{animation:none}}

/* 모바일 메뉴가 열려 있는 동안 화면 위에 떠 있는 버튼·바 숨김 */
html.hh-menu-open .hc-fab,html.hh-menu-open .hc-panel,html.hh-menu-open #stickyAsk,html.hh-menu-open #sdAskFixed{visibility:hidden}

/* 화면에는 안 보이고 화면낭독기만 읽는 글자 (예: 「새 탭」 안내) */
.hh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 일본어 페이지: 한국어용 word-break:keep-all 이 일본어 줄바꿈을 막아 넘치지 않게 */
html[lang="ja"] body, html[lang="ja"] body *{word-break:normal!important;line-break:strict;overflow-wrap:break-word}
/* 번역 문구가 길어도 모바일 헤더에서 메뉴 버튼이 밀려나지 않게 */
@media (max-width:900px){.hh-right{min-width:0}.hh-right .hh-cta{max-width:44vw;overflow:hidden;text-overflow:ellipsis}}
/* 번역 페이지: 길어진 버튼 문구는 줄바꿈 허용 (모바일 가로 넘침 방지) */
html:not([lang="ko"]) .sd-btn{white-space:normal;text-align:center}
/* 모바일: 넓은 표는 표 안에서만 가로 스크롤 (화면 전체가 옆으로 밀리지 않게) — NFR-02 */
@media (max-width:600px){body[data-site="market"] table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ── 공통 푸터 (FR-COM-010) — 호미 팩토리·호미 MARKET 동일 표기 ── */
.hf{background:#141414;color:rgba(255,255,255,.72);padding:64px 32px 32px;font-family:var(--hh-font,'Pretendard','Noto Sans KR',system-ui,sans-serif);-webkit-font-smoothing:antialiased}
.hf *{box-sizing:border-box}
.hf a{color:inherit;text-decoration:none}
.hf-in{max-width:1280px;margin:0 auto}
.hf-top{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:36px;padding-bottom:40px}
.hf h5{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.04em;margin:0 0 16px}
.hf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hf-col a{font-size:14.5px;font-weight:700;color:#fff}
.hf-col a:hover,.hf-col a:focus-visible{color:#D2D2D2}
.hf-col a.hf-privacy{color:#D2D2D2;font-weight:800;text-decoration:underline;text-underline-offset:3px}   /* 개인정보처리방침: 다른 링크와 구분 (FR-COM-011) */
.hf-support p{margin:0 0 10px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.85)}
.hf-support .hf-hours{font-weight:700;color:#fff}
.hf-support a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hf-cta{display:inline-flex!important;margin-top:8px;padding:12px 22px;border-radius:10px;background:#fff;color:#141414!important;text-decoration:none!important;font-size:14px;font-weight:800}
.hf-cta:hover{background:#F6F6F6}
.hf a:focus-visible{outline:2px solid #D2D2D2;outline-offset:3px;border-radius:4px}
.hf-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.55)}
.hf-bottom p{margin:0}
.hf-biz span+span::before{content:" | ";color:rgba(255,255,255,.3)}
.hf-copy{margin-top:4px!important}
@media (max-width:900px){.hf{padding:48px 20px 28px}.hf-top{grid-template-columns:1fr 1fr;gap:28px}.hf-support{grid-column:1/-1}}
@media (max-width:520px){.hf-biz span{display:block}.hf-biz span+span::before{content:none}}

/* ── 의뢰서 공통 동작 (FR-COM-008·009) ── */
.cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.cf-err{margin:6px 0 0;font-size:13px;font-weight:600;color:#D92D20;line-height:1.5}
.is-invalid input,.is-invalid textarea,.is-invalid .country-chip-grid{border-color:#D92D20!important;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.cf-agree.is-invalid{color:#D92D20}
.cf-top-err{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#FEF3F2;color:#B42318;font-size:14px;font-weight:600}
.country-chip-grid .cc:focus-visible{outline:2px solid #141414;outline-offset:2px}
.cf-submit[disabled]{opacity:.6;cursor:progress}
.cf-done{padding:56px 32px;text-align:center;border-radius:20px;background:#fff;border:1px solid #EEEEEE;outline:none}
.cf-done-ic{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:#F6F6F6;color:#141414;display:grid;place-items:center;font-size:30px;font-weight:900}
.cf-done h3{font-size:24px;font-weight:900;margin:0 0 12px;letter-spacing:-.02em}
.cf-done p{font-size:15px;line-height:1.7;color:#55525C;margin:0 0 6px}
.cf-done a{color:#141414;font-weight:700}
.cf-done-btn{display:inline-flex;margin-top:18px;padding:12px 26px;border-radius:999px;background:#141414;color:#fff!important}

/* ── 개인정보 처리방침 전문 (FR-COM-011) ── */
.doc-section.pv ol{margin:10px 0 14px;padding-left:22px;font-size:14.5px;color:var(--ink-2,#3A3742);line-height:1.85}
.doc-section.pv ol li{margin-bottom:6px}
.doc-section.pv .pv-note{font-size:13.5px;color:#6B6773}
.pv-table{overflow-x:auto;margin:14px 0}
.pv-table table{margin:0;min-width:520px}
.pv-table tbody th{background:#FAF7F2;width:30%;font-weight:700}
/* 하단 고정 바(상담 유도)가 있는 페이지: 푸터 회사 정보가 바에 가리지 않게 */
body:has(#stickyAsk) .hf,body:has(#sdAskFixed) .hf{padding-bottom:128px}

/* 의뢰서 「방향」 선택: 공통 입력칸 폭(100%)이 라디오에도 걸려 글자가 여러 줄로 깨지던 문제 */
.direction-radio input[type=radio]{width:18px!important;height:18px;flex:0 0 18px;margin:0;padding:0;border:0;box-shadow:none}
.direction-radio label{justify-content:flex-start;line-height:1.4;min-height:48px}
/* 고정 헤더 아래로 상단 경로(예: 「의뢰서」)가 가려지지 않게 */
.page-hero:has(+ .contact-section){padding-top:calc(var(--hh-offset,122px) - var(--hh-ban,48px) + 28px)}
.direction-radio{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
/* 의뢰서: 상단 경로를 본문 왼쪽 선에 맞추고 아래 빈 공간 줄이기 */
.page-hero:has(+ .contact-section){padding-bottom:0}
.page-hero:has(+ .contact-section) .page-hero-inner{padding:0 24px}
.page-hero + .contact-section .contact-wrap{margin-top:20px}
/* 개인정보 동의 줄: 가로 배치(flex) 때문에 문장·링크·안내가 3칸으로 갈라지던 문제 → 문장 흐름 + 안내는 아래 줄 */
.cf-agree{display:block!important;position:relative;padding-left:30px;line-height:1.65;cursor:pointer}
.cf-agree input[type=checkbox]{position:absolute;left:0;top:2px;margin:0}
.cf-agree .cf-err{display:block;margin-top:6px}

/* ── Home 히어로 배경 영상 (FR-COM-015) ── */
section.hero.hv{position:relative;min-height:calc(100svh - var(--hh-ban,48px));display:flex;align-items:center;justify-content:center;padding:calc(var(--hh-offset,122px) - var(--hh-ban,48px) + 48px) 24px 72px!important;background:#141018!important;overflow:hidden;color:#fff}
.hv-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hv-poster,.hv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv-video{opacity:0;transition:opacity .8s ease}
.hv.hv-on .hv-video{opacity:1}
.hv-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.42) 0%,rgba(16,16,16,.48) 55%,rgba(16,16,16,.58) 100%)}
section.hero.hv .hero-inner{position:relative;z-index:1;max-width:1000px}
section.hero.hv h1{color:#fff;margin-top:0!important;text-shadow:0 2px 28px rgba(0,0,0,.28)}
section.hero.hv h1 .hl{color:#D2D2D2}
section.hero.hv p{color:rgba(255,255,255,.92);margin-bottom:36px;text-shadow:0 1px 16px rgba(0,0,0,.3)}
section.hero.hv p span{color:#E6E6E6!important}
.hv-network{padding:40px 24px 48px;text-align:center;background:#fff;border-bottom:1px solid #F1F1F1}
@media (prefers-reduced-motion:reduce){.hv-video{display:none}}

/* FR-MKT-034 히어로 글로벌 요소 — 영상 위 머리말 알약 + 현지 네트워크 줄 */
section.hero.hv .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:#fff;border:0;color:#141414;font-size:13px;font-weight:800;letter-spacing:.04em;margin:0 0 26px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
section.hero.hv .hero-badge .spark{color:#FFC53D;font-size:14px}
section.hero.hv .hero-badge .divider{color:#D2D2D2}
section.hero.hv .country-network{margin-top:40px}
section.hero.hv .cn-label{font-size:12px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.82);margin-bottom:12px}
section.hero.hv .region-chips{margin-top:0;gap:8px}
section.hero.hv .region-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 14px;font-size:13px}
@media (max-width:600px){section.hero.hv .hero-badge{font-size:11px;padding:7px 12px;margin-bottom:18px}section.hero.hv .country-network{margin-top:28px}section.hero.hv .region-chip{padding:6px 11px;font-size:12px}}

/* FR-MKT-033 색 사용 규칙 (MARKET 페이지만) — 보라 #141414·눌렀을 때 #3A3A3A·연보라 #F6F6F6, 노랑 #FFC53D는 작은 포인트만,
   검정 #141414는 맨 위 띠 배너·맨 아래 상담 유도·푸터, 바탕은 그라데이션 없이, 카드 #FAF7F2, 선 #E6E0D6 */
body[data-site="market"]{--primary:#141414;--primary-2:#3A3A3A;--primary-3:#3A3A3A;--primary-light:#F6F6F6;--line:#E6E0D6;--bg-2:#FAF7F2;--bg-3:#141414;--accent-yellow:#FFC53D}
body[data-site="market"] .trend-banner,body[data-site="market"] .renewal-banner{background:#141414}
body[data-site="market"] .star{color:#FFC53D}
body[data-site="market"] .final-cta,body[data-site="market"] .tr-hero{background:#141414}
body[data-site="market"] .cmp-col.ours{background:#F6F6F6}
body[data-site="market"] .logo-card{background:#FAF7F2!important}
body[data-site="market"] .camp-cover,body[data-site="market"] .tr-cover,body[data-site="market"] .tra-cover{background:#141414}
body[data-site="market"] .camp-cover.g2,body[data-site="market"] .tr-cover.g2,body[data-site="market"] .tr-cover.g5{background:#141414}
body[data-site="market"] .camp-cover.g3,body[data-site="market"] .tr-cover.g3,body[data-site="market"] .tr-cover.g4{background:#3A3A3A}
body[data-site="market"] .tr-cover.g6{background:#F6F6F6}
body[data-site="market"] .cta-strip{background:#F6F6F6}
body[data-site="market"] .sd-steps li.on{background:#141414}
body[data-site="market"] .sd-icard .ph{background:#F6F6F6}

/* ── 상단 띠 배너 (FR-MKT-026) — 모든 MARKET 페이지 공통 ── */
body[data-site="market"] .trend-banner.tb{position:fixed;top:0;left:0;right:0;z-index:9999;background:#141414;color:#fff;padding:6px 20px;display:flex;justify-content:center;align-items:center;gap:0;text-align:left;font-family:var(--hh-font,'Pretendard',sans-serif)}
body[data-site="market"] .trend-banner.tb[hidden]{display:none}
.trend-banner.tb .tb-link{display:inline-flex;align-items:center;gap:16px;color:#fff;text-decoration:none;max-width:100%}
.trend-banner.tb .tb-cover{position:relative;flex:0 0 48px;width:48px;height:64px;margin:0 6px 0 2px;transform:rotate(-9deg);transition:transform .25s}
/* 뒤에 한 장 더 겹친 종이 — 검정 띠 위에서도 기울기·두께가 보이도록 */
.trend-banner.tb .tb-cover::before{content:"";position:absolute;inset:0;border-radius:3px;background:#ECECEC;transform:rotate(11deg) translate(6px,1px);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.trend-banner.tb .tb-cover svg,.trend-banner.tb .tb-cover img{position:relative;display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;box-shadow:3px 4px 8px rgba(0,0,0,.75),0 0 16px rgba(20,20,20,.6),inset 0 0 0 1px rgba(255,255,255,.2)}
.trend-banner.tb .tb-link:hover .tb-cover{transform:rotate(-4deg) translateY(-2px)}
.trend-banner.tb .tb-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.trend-banner.tb .tb-small{font-family:var(--hh-font-en,'Inter',sans-serif);font-size:11px;font-weight:800;letter-spacing:.14em;color:#D2D2D2}
.trend-banner.tb .tb-star{color:#FFC53D}
.trend-banner.tb .tb-big{font-size:15px;font-weight:700;line-height:1.35}
.trend-banner.tb .tb-bar{color:rgba(255,255,255,.35);padding:0 4px}
.trend-banner.tb .tb-arrow{font-size:22px;line-height:1;color:#fff;transition:transform .2s}
.trend-banner.tb .tb-link:hover .tb-big{color:#D2D2D2}
.trend-banner.tb .tb-link:hover .tb-arrow{transform:translateX(3px)}
.trend-banner.tb .tb-link:focus-visible{outline:2px solid #D2D2D2;outline-offset:4px;border-radius:6px}
@media (max-width:600px){
  body[data-site="market"] .trend-banner.tb{padding:6px 14px}
  .trend-banner.tb .tb-link{gap:12px}
  .trend-banner.tb .tb-cover{flex-basis:36px;width:36px;height:48px}
  .trend-banner.tb .tb-small{font-size:9.5px;letter-spacing:.1em}
  .trend-banner.tb .tb-big{font-size:13px}
  .trend-banner.tb .tb-bar{display:none}
  .trend-banner.tb .tb-sub{display:block;font-weight:600;color:rgba(255,255,255,.75);font-size:12px}
}

/* 크리에이터 지원 — 상단 바 보라 글자 (FR-MKT-042) */
.hh .hh-extra{color:#141414!important;font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none;margin-right:6px}
.hh-extra:hover{text-decoration:underline}
@media (max-width:1100px){.hh-right .hh-extra{display:none}}
.hh-pfoot .hh-extra{display:block;padding:12px 0;margin:0}

/* 블랙·그레이 테마: 어두운 배경 위 강조·버튼 보정 (호미팩토리 메인 사이트만) */
body:not([data-site="production"]):not([data-site="factory"]) .hero .big-cta{background:#fff!important;color:#141414!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important}
body:not([data-site="production"]):not([data-site="factory"]) .hero .big-cta:hover{background:#E9E9E9!important}
body:not([data-site="production"]):not([data-site="factory"]) .hero h1 .hl{color:#C9C9C9!important}
body:not([data-site="production"]):not([data-site="factory"]) .final-cta .hl,body:not([data-site="production"]):not([data-site="factory"]) .gn-cta-sec .hl{color:#9A9A9A!important}
body:not([data-site="production"]):not([data-site="factory"]) .final-cta .big-cta,body:not([data-site="production"]):not([data-site="factory"]) .gn-cta-sec .big-cta{background:#fff!important;color:#141414!important;box-shadow:0 10px 30px rgba(0,0,0,.4)!important}
body:not([data-site="production"]):not([data-site="factory"]) .wk-out .wk-k{background:#fff!important;color:#141414!important}
body:not([data-site="production"]):not([data-site="factory"]) .trl-cta .trl-btn{background:#fff!important;color:#141414!important}
body:not([data-site="production"]):not([data-site="factory"]) .sd-dark .sd-steps li.on{background:#fff!important;color:#141414!important}
body:not([data-site="production"]):not([data-site="factory"]) .sd-dark .sd-steps li.on *{color:#141414!important}
body:not([data-site="production"]):not([data-site="factory"]) .sd-band .sd-btn{background:#fff!important;color:#141414!important}
body:not([data-site="production"]):not([data-site="factory"]) .sd-band .sd-hl,body:not([data-site="production"]):not([data-site="factory"]) .sd-dark .sd-hl{color:#B5B5B5!important}