@charset "utf-8";
/* ============================================================
   준디자인 친환경인쇄 — 제안 시안
   친환경 그린 톤. 컬러 타일 / 라운드 카드 / 전환 중심
   ============================================================ */

/* ---------- Tokens ----------
   --pri 는 로고 잎사귀 녹색, --sky 는 로고 '준' 블루에서 가져왔다.
   --pri-rgb 는 rgba() 반투명 표현용 (그림자·포커스 링 등) */
:root{
  --pri:#1f9a4b;
  --pri-d:#167a3a;
  --pri-l:#eaf6ee;
  --pri-rgb:31,154,75;
  --grad:linear-gradient(135deg,#8cc63f 0%,#22a04b 52%,#0f8a7e 100%);
  --sky:#0a8ad8;
  --mint:#10b981;
  --coral:#ff6b57;
  --amber:#ffb531;
  --violet:#8b5cf6;
  --pink:#f472b6;

  --tx:#14161c;
  --tx-70:#4b5060;
  --tx-45:#878d9e;
  --tx-25:#c2c7d4;
  --line:#e6e9f0;
  --line-2:#f1f3f8;
  --bg:#fff;
  --bg-2:#f5f7fb;
  --bg-3:#eef2f9;

  --ff:'Pretendard', -apple-system, system-ui, sans-serif;
  --r-s:10px;
  --r:16px;
  --r-l:24px;
  --sh-s:0 2px 8px rgba(20,22,28,.05);
  --sh:0 8px 24px -8px rgba(20,22,28,.12);
  --sh-l:0 24px 60px -20px rgba(20,22,28,.22);

  --wrap:1280px;
  --gut:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--ff);font-size:15px;line-height:1.65;
  letter-spacing:-.015em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,dt,figure{margin:0}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--pri);color:#fff}

/* ---------- AOS 안전장치 ----------
   aos.css 는 [data-aos]{opacity:0} 으로 요소를 먼저 숨긴다.
   CDN 차단 / JS 실패 / 오프라인 상황에서 콘텐츠가 영구히 사라지는 것을 막기 위해
   main.js 가 html 에 .aos-ready 를 붙이기 전까지는 항상 보이게 강제한다.
   (이 파일이 aos.css 뒤에 로드되므로 우선 적용된다) */
html:not(.aos-ready) [data-aos]{opacity:1 !important;transform:none !important}

/* ---------- Utility ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
[hidden]{display:none !important}   /* 인라인 display 가 hidden 속성을 덮어쓰지 않도록 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:900;transition:width .1s linear}

/* 플레이스홀더 */
.ph{display:block;position:relative;overflow:hidden;background:var(--bg-3);border-radius:inherit}
.ph::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,var(--p1,#e8edf7) 0%,var(--p2,#d3ddf0) 100%)}
.ph::after{
  content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;font-size:11.5px;font-weight:600;color:rgba(20,22,28,.34);line-height:1.5;
}
.ph-1{--p1:#e3ecff;--p2:#c9d8fb}
.ph-2{--p1:#e0f7f0;--p2:#c0ecdd}
.ph-3{--p1:#ffece8;--p2:#ffd4cb}
.ph-4{--p1:#fff4dd;--p2:#ffe6b8}
.ph-5{--p1:#f0e9ff;--p2:#ded1ff}
.ph-6{--p1:#ffe9f4;--p2:#ffd0e6}
.r-1x1{aspect-ratio:1/1}
.r-4x3{aspect-ratio:4/3}
.r-3x4{aspect-ratio:3/4}
.r-16x9{aspect-ratio:16/9}
.r-2x1{aspect-ratio:2/1}
.r-21x9{aspect-ratio:21/9}

/* ---------- 인라인 SVG 아이콘 ---------- */
svg.i-ar{width:15px;height:15px;flex:none}
svg.i-ck{width:11px;height:11px;flex:none}
svg.i-x{width:14px;height:14px;flex:none}
svg.i-box{width:17px;height:17px;flex:none}
svg.i-st{width:13px;height:13px;flex:none}
/* 화살표는 호버 시 살짝 밀린다 */
.sec-more svg.i-ar,.lead-card svg.i-ar,.pf-item svg.i-ar{transition:transform .32s var(--ease-out)}
.sec-more:hover svg.i-ar,.lead-card:hover svg.i-ar,.pf-item:hover svg.i-ar{transform:translateX(3px)}

/* 섹션 공통 */
.sec{padding:96px 0}
.sec-gray{background:var(--bg-2)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:42px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center;gap:0}
.sec-tag{
  display:inline-block;padding:6px 14px;border-radius:99px;background:var(--pri-l);
  color:var(--pri);font-size:11.5px;font-weight:700;letter-spacing:.06em;margin-bottom:16px;
}
.sec-tit{font-size:36px;font-weight:800;line-height:1.3;letter-spacing:-.04em}
.sec-tit em{font-style:normal;color:var(--pri)}
.sec-desc{margin-top:12px;font-size:15px;color:var(--tx-45)}
.sec-more{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:99px;
  border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--tx-70);
  white-space:nowrap;transition:.3s var(--ease);
}
.sec-more:hover{background:var(--tx);border-color:var(--tx);color:#fff}

/* 버튼 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 30px;
  border-radius:99px;font-size:15px;font-weight:700;letter-spacing:-.02em;
  transition:.32s var(--ease);white-space:nowrap;
}
.btn-pri{background:var(--pri);color:#fff;box-shadow:0 10px 24px -10px rgba(var(--pri-rgb),.7)}
.btn-pri:hover{background:var(--pri-d);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(var(--pri-rgb),.8)}
.btn-dark{background:var(--tx);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}
.btn-line{border:1.5px solid var(--line);color:var(--tx)}
.btn-line:hover{border-color:var(--pri);color:var(--pri)}
.btn-white{background:#fff;color:var(--pri)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.btn-ghost-w{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost-w:hover{background:#fff;color:var(--pri);border-color:#fff}
.btn-sm{height:42px;padding:0 20px;font-size:13.5px}
.btn-lg{height:58px;padding:0 36px;font-size:16px}

/* ============================================================
   HEADER
   ============================================================ */
.top-promo{background:var(--grad);color:#fff;font-size:13px;font-weight:500;position:relative}
.top-promo .wrap{
  display:flex;align-items:center;justify-content:center;gap:12px;height:42px;
  padding-right:calc(var(--gut) + 104px);   /* 닫기 버튼 자리 확보 */
  padding-left:calc(var(--gut) + 104px);    /* 좌우 대칭 → 문구는 실제 중앙 */
}
.top-promo b{flex:none;background:rgba(255,255,255,.22);padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.04em}
.top-promo .wrap > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-promo .close{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;font-size:12px;opacity:.75;transition:.25s}
.top-promo .close:hover{opacity:1}

.hd{position:sticky;top:0;z-index:800;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);transition:.3s}
.hd.shrink{box-shadow:var(--sh-s)}
.hd-top{display:flex;align-items:center;gap:36px;height:82px;transition:height .3s var(--ease)}
.hd.shrink .hd-top{height:66px}
.logo{display:flex;align-items:center;flex:none;min-width:0}
/* 로고는 폭 기준으로 제어하고 height:auto 로 원본 비율(1920:819)을 유지한다.
   height 를 같이 지정하면 이미지가 눌린다. 세로가 큰 로고라 폭을 작게 잡는다 (160 → 높이 약 68) */
.logo img{display:block;width:160px;max-width:100%;height:auto;transition:width .3s var(--ease)}
.hd.shrink .logo img{width:132px}
.ft-logo{margin-bottom:16px}
.ft-logo img{width:150px;height:auto}
.hd-search{flex:1;max-width:500px;position:relative}
.hd-search input{
  width:100%;height:50px;border-radius:99px;border:1.5px solid var(--line);background:var(--bg-2);
  padding:0 52px 0 22px;font-size:14.5px;transition:.3s;
}
.hd-search input:focus{outline:0;border-color:var(--pri);background:#fff;box-shadow:0 0 0 4px rgba(var(--pri-rgb),.1)}
.hd-search input::placeholder{color:var(--tx-25)}
.hd-search button{position:absolute;right:6px;top:6px;width:38px;height:38px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center}
.hd-util{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.hd-util a{
  display:flex;flex-direction:column;align-items:center;gap:4px;width:58px;padding:6px 0;
  font-size:11px;font-weight:600;color:var(--tx-70);border-radius:var(--r-s);transition:.25s;position:relative;
}
.hd-util a:hover{background:var(--bg-2);color:var(--pri)}
.hd-util a.sch{display:none}
@keyframes schIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hd-util b{
  position:absolute;top:0;right:8px;min-width:18px;height:18px;border-radius:9px;background:var(--coral);
  color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 5px;
}

/* GNB */
.gnb-bar{border-top:1px solid var(--line-2);position:relative;background:#fff}
.gnb-bar .wrap{display:flex;align-items:center;gap:6px}
.gnb-all{display:flex;align-items:center;gap:9px;height:54px;padding-right:22px;margin-right:16px;border-right:1px solid var(--line-2);font-size:14px;font-weight:700;flex:none}
.gnb-all .bars{display:grid;gap:3.5px;width:16px}
.gnb-all .bars i{display:block;height:2px;border-radius:2px;background:var(--tx);transition:.3s}
.gnb-all:hover .bars i{background:var(--pri)}
.gnb{display:flex;align-items:center}
.gnb > li > a{display:block;padding:0 15px;height:54px;line-height:54px;font-size:15px;font-weight:700;letter-spacing:-.03em;position:relative;transition:.25s;white-space:nowrap}
.gnb > li > a::after{content:'';position:absolute;left:15px;right:15px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--pri);transform:scaleX(0);transition:.35s var(--ease-out)}
/* 열림 상태는 JS(.open) 로 제어한다.
   순수 :hover 로 하면 대각선으로 서브메뉴로 내려갈 때 인접 메뉴를 스쳐
   포커스가 튀는 문제가 있어 hover-intent 지연을 둔다.
   키보드 접근은 :focus-visible 로 연다. */
.gnb > li.open > a,.gnb > li:has(:focus-visible) > a{color:var(--pri)}
.gnb > li.open > a::after,.gnb > li:has(:focus-visible) > a::after{transform:scaleX(1)}
.gnb-sub{
  position:absolute;left:0;top:100%;width:100%;background:#fff;box-shadow:var(--sh);
  border-top:1px solid var(--line-2);border-radius:0 0 var(--r-l) var(--r-l);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:5;
}
/* 키보드 접근은 :focus-visible 로만 연다 — :focus-within 은 마우스 클릭 후 포커스가 남아 메뉴가 고정되는 문제가 있었음 */
.gnb.instant .gnb-sub{transition:none}
.gnb > li.open .gnb-sub,.gnb > li:has(:focus-visible) .gnb-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
/* 메뉴와 서브메뉴 사이 마우스 이동을 받아주는 보이지 않는 브릿지 */
.gnb > li > a::before{
  content:'';position:absolute;left:0;right:0;top:100%;height:10px;
}
.gnb-sub .wrap{display:flex;align-items:stretch;gap:40px;padding:26px var(--gut) 28px}
/* ---- 드롭다운 좌측 미니 배너 카드 (가로형) ----
   [중요] 서브메뉴 높이를 늘리지 않는 것이 원칙.
   카드는 우측 소분류 리스트 높이에 맞춰 늘어나기만 하고(stretch),
   자기 높이로 드롭다운을 키우지 않는다. 썸네일이 남는 높이를 흡수한다. */
.gnb-sub .lead{flex:0 0 250px;align-self:stretch}
.lead-card{
  display:flex;gap:12px;align-items:stretch;height:100%;min-height:78px;
  padding:10px;border-radius:var(--r-s);background:var(--bg-2);
  border:1px solid var(--line-2);transition:.28s var(--ease);
}
.lead-card:hover{background:var(--pri-l);border-color:rgba(var(--pri-rgb),.25)}
.lead-card .thumb{
  position:relative;flex:0 0 86px;align-self:stretch;min-height:58px;
  border-radius:7px;overflow:hidden;background:var(--bg-3);
}
.lead-card .thumb img{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.lead-card .thumb .ph{position:absolute;inset:0;border-radius:0}
.lead-card .thumb .ph::after{content:none}
.lead-card:hover .thumb img{transform:scale(1.07)}
.lead-card .txt{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}
.lead-card strong{
  display:block;font-size:14.5px;font-weight:800;letter-spacing:-.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lead-card .copy{
  display:block;margin-top:2px;font-size:11.5px;color:var(--tx-45);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lead-card .go{
  display:inline-flex;align-items:center;gap:4px;margin-top:5px;
  font-size:11px;font-weight:700;color:var(--pri);
}
.lead-card .go i{font-style:normal;transition:transform .3s var(--ease)}
.lead-card:hover .go i{transform:translateX(3px)}
.gnb-sub ul{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 12px;flex:1;align-content:start}
.gnb-sub ul a{display:block;padding:9px 12px;border-radius:var(--r-s);font-size:13.5px;font-weight:500;color:var(--tx-70);transition:.25s}
.gnb-sub ul a:hover{background:var(--pri-l);color:var(--pri)}
.gnb-sub ul a .new{font-size:9px;font-weight:800;color:var(--coral);vertical-align:2px;margin-left:4px}
.gnb-right{display:flex;align-items:center;gap:16px;margin-left:auto;font-size:13px;font-weight:600;color:var(--tx-45);flex:none}
.gnb-right a:hover{color:var(--pri)}
.gnb-right .hot{color:var(--coral)}
.gnb-right .guide{display:flex;align-items:center;gap:6px;height:34px;padding:0 16px;border-radius:99px;background:var(--pri-l);color:var(--pri);font-weight:700}
.gnb-right .guide:hover{background:var(--pri);color:#fff}
/* 친환경 로고 다운로드 — 고객 원고의 녹색 알약 버튼 */
.gnb-right .eco{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border-radius:99px;
  background:var(--pri);color:#fff;font-weight:700;white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(var(--pri-rgb),.8);transition:.25s var(--ease);
}
.gnb-right .eco:hover{background:var(--pri-d);color:#fff;transform:translateY(-1px)}

/* 메가 패널 */
.mega{position:fixed;inset:0;z-index:850;visibility:hidden}
.mega.on{visibility:visible}
.mega-dim{position:absolute;inset:0;background:rgba(20,22,28,.45);opacity:0;transition:.35s}
.mega.on .mega-dim{opacity:1}
.mega-panel{
  position:absolute;left:0;top:0;width:min(600px,94vw);height:100%;background:#fff;
  transform:translateX(-100%);transition:.45s var(--ease-out);overflow-y:auto;padding:30px 36px 60px;
}
.mega.on .mega-panel{transform:translateX(0)}
.mega-panel .x{position:absolute;right:26px;top:26px;width:36px;height:36px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;color:var(--tx-70);transition:.25s}
.mega-panel .x:hover{background:var(--tx);color:#fff}
.mega-panel h3{font-size:24px;font-weight:800;letter-spacing:-.04em;margin-bottom:4px}
.mega-panel > p{font-size:13px;color:var(--tx-45);margin-bottom:26px}
.mega-grp{padding:18px 0;border-top:1px solid var(--line-2)}
.mega-grp strong{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;margin-bottom:12px;letter-spacing:-.03em}
.mega-grp strong i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-style:normal;color:#fff;font-weight:700}
.mega-grp ul{display:flex;flex-wrap:wrap;gap:7px}
.mega-grp li a{display:block;padding:8px 14px;border-radius:99px;background:var(--bg-2);font-size:13px;font-weight:500;color:var(--tx-70);transition:.25s}
.mega-grp li a:hover{background:var(--pri);color:#fff}

/* ============================================================
   HERO — 2분할 배너 슬라이더
   ============================================================ */
.hero{padding:26px 0 0}
.hero-sw{border-radius:var(--r-l);overflow:hidden;padding-bottom:2px}
.hero-sw .swiper-slide{border-radius:var(--r-l);overflow:hidden}
/* ---- 배너 : 배경(bn-bg) + 오브젝트(bn-obj) 2레이어 ----
   두 이미지 모두 없어도 그라디언트만으로 정상 표시된다.
   img 태그에 onerror="this.remove()" 가 걸려 있어 파일이 없으면 스스로 사라짐. */
/* 슬라이드를 컨테이너로 선언 → 카드 폭 기준(cqw)으로 글자 크기 산출.
   slidesPerView 가 2장/1장으로 바뀌어도 제목 크기가 카드에 맞게 따라간다. */
.hero-sw .swiper-slide{container-type:inline-size}
.bn{
  position:relative;display:flex;align-items:center;
  height:340px;                     /* 고정 — 제목 줄 수에 따라 높이가 변하지 않도록 */
  border-radius:var(--r-l);overflow:hidden;color:#fff;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
/* 배경은 이미지를 쓰지 않는다 — .bn-N 의 CSS 그라디언트 + 아래 두 레이어로 깊이감을 만든다.
   ① ::before  좌측 스크림(텍스트 가독성) + 우측 하단 광원
   ② ::after   오브젝트 뒤 소프트 헤일로 */
.bn::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% 112%, rgba(255,255,255,.17), rgba(255,255,255,0) 62%),
    linear-gradient(98deg, rgba(8,10,20,.40) 0%, rgba(8,10,20,.14) 44%, rgba(8,10,20,0) 74%);
}
.bn::after{
  content:'';position:absolute;right:-6%;bottom:-20%;width:58%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.2), rgba(255,255,255,0) 68%);
  z-index:1;pointer-events:none;
}

/* ---- 배경 장식 모션 (CSS 전용 / transform·opacity 만 사용) ----
   d1 대형 링 · d2 소형 링 · d3 소프트 블롭 · d4 미세 도트 그리드 */
.bn-deco{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;border-radius:inherit}
.bn-deco i{position:absolute;display:block}

.bn-deco .d1{
  width:430px;height:430px;left:-140px;top:-170px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16);
  animation:decoDrift1 26s ease-in-out infinite;
}
.bn-deco .d2{
  width:190px;height:190px;left:34%;bottom:-86px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  animation:decoDrift2 19s ease-in-out infinite;
}
.bn-deco .d3{
  width:250px;height:250px;right:8%;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 66%);
  filter:blur(6px);
  animation:decoDrift3 23s ease-in-out infinite;
}
.bn-deco .d4{
  inset:-10%;
  background-image:radial-gradient(rgba(255,255,255,.26) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(85% 70% at 78% 92%,#000 0%,transparent 72%);
          mask-image:radial-gradient(85% 70% at 78% 92%,#000 0%,transparent 72%);
  opacity:.5;
  animation:decoGrid 34s linear infinite;
}

@keyframes decoDrift1{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(34px,26px,0) rotate(28deg)}
}
@keyframes decoDrift2{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-26px,-20px,0) scale(1.12)}
}
@keyframes decoDrift3{
  0%,100%{transform:translate3d(0,0,0);opacity:.75}
  50%    {transform:translate3d(-30px,34px,0);opacity:1}
}
@keyframes decoGrid{
  0%  {transform:translate3d(0,0,0)}
  100%{transform:translate3d(-26px,-26px,0)}
}

/* 배너별 위상 분산 — 6장이 같이 움직이는 티가 나지 않게 */
.bn-2 .bn-deco i{animation-delay:-4s}
.bn-3 .bn-deco i{animation-delay:-8s}
.bn-4 .bn-deco i{animation-delay:-12s}
.bn-5 .bn-deco i{animation-delay:-16s}
.bn-6 .bn-deco i{animation-delay:-20s}
/* 링 위치도 배너마다 살짝 다르게 */
.bn-2 .bn-deco .d1{left:auto;right:-160px;top:auto;bottom:-190px}
.bn-3 .bn-deco .d1{left:-180px;top:auto;bottom:-200px;width:380px;height:380px}
.bn-4 .bn-deco .d2{left:auto;right:38%;bottom:auto;top:-70px}
.bn-5 .bn-deco .d1{left:-120px;top:-120px;width:470px;height:470px}
.bn-6 .bn-deco .d3{right:auto;left:22%;top:auto;bottom:-110px}
.bn-in{
  position:relative;z-index:3;padding:42px 44px;max-width:60%;
  display:flex;flex-direction:column;align-items:flex-start;
}
.bn .tag{
  display:inline-block;flex:none;padding:5px 13px;border-radius:99px;background:rgba(255,255,255,.2);
  backdrop-filter:blur(6px);font-size:11.5px;font-weight:700;letter-spacing:.04em;margin-bottom:14px;
}
/* 제목 — 카드 폭 기준 가변 + 최대 2줄 강제(넘치면 말줄임)
   word-break:keep-all 로 한글이 단어 중간에서 끊기지 않게 한다 */
.bn h3{
  font-size:26px;                              /* cqw 미지원 브라우저 fallback */
  font-size:clamp(20px,5.05cqw,30px);
  font-weight:800;line-height:1.3;letter-spacing:-.045em;
  text-shadow:0 2px 14px rgba(8,10,20,.2);
  word-break:keep-all;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* 서브 카피 — 1줄 고정 */
.bn p{
  margin-top:11px;font-size:14.5px;opacity:.88;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
  word-break:keep-all;
}
.bn .go{margin-top:24px;flex:none}
/* 투명 PNG 오브젝트 — 배너마다 주기·진폭·위상을 달리해 따로따로 부유한다 */
.bn-obj{
  position:absolute;right:24px;bottom:0;width:42%;max-width:250px;max-height:86%;
  height:auto;object-fit:contain;object-position:bottom right;z-index:2;
  filter:drop-shadow(0 26px 42px rgba(8,10,20,.34));
  --amp:11px;--rot:1.2deg;--dur:6.4s;--dly:0s;
  animation:bnFloat var(--dur) ease-in-out var(--dly) infinite;
  will-change:transform;
}
@keyframes bnFloat{
  0%,100%{transform:translateY(calc(var(--amp) * .55)) rotate(calc(var(--rot) * -.35))}
  50%    {transform:translateY(calc(var(--amp) * -1))  rotate(var(--rot))}
}
.bn-1 .bn-obj{--dur:6.4s;--dly:-0.2s;--amp:11px;--rot:1.1deg}
.bn-2 .bn-obj{--dur:7.2s;--dly:-1.6s;--amp:9px; --rot:-1.4deg}
.bn-3 .bn-obj{--dur:5.8s;--dly:-0.9s;--amp:13px;--rot:1.6deg}
.bn-4 .bn-obj{--dur:6.9s;--dly:-2.3s;--amp:10px;--rot:-1.0deg}
.bn-5 .bn-obj{--dur:7.6s;--dly:-1.1s;--amp:8px; --rot:1.3deg}
.bn-6 .bn-obj{--dur:6.1s;--dly:-2.8s;--amp:12px;--rot:-1.5deg}
/* 헤일로도 오브젝트와 다른 주기로 아주 옅게 숨쉬게 */
.bn::after{animation:bnHalo 9s ease-in-out infinite}
.bn-2::after,.bn-5::after{animation-duration:11s;animation-delay:-3s}
.bn-3::after,.bn-6::after{animation-duration:8s;animation-delay:-5s}
@keyframes bnHalo{
  0%,100%{opacity:.8;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .bn-obj{animation:none;transform:translateY(5px)}
  .bn::after,.bn-deco i{animation:none}
}
/* 친환경 팔레트 — 숲 / 리프 / 크라프트 / 틸 / 로고 블루 / 올리브 / 딥포레스트 */
.bn-1{background:linear-gradient(120deg,#2aa557,#167a3a)}
.bn-2{background:linear-gradient(120deg,#3f8f5a,#1f5e3a)}
.bn-3{background:linear-gradient(120deg,#c09366,#8a6239)}
.bn-4{background:linear-gradient(120deg,#16a59a,#0b766f)}
.bn-5{background:linear-gradient(120deg,#1e9be0,#0a6fb8)}
.bn-6{background:linear-gradient(120deg,#8bb33a,#5d8a1f)}
.bn-7{background:linear-gradient(120deg,#35644a,#1d3b2b)}
.bn-7 .bn-deco i{animation-delay:-24s}
.bn-7 .bn-obj{--dur:7s;--dly:-1.9s;--amp:10px;--rot:1.2deg}
.hero-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;padding:22px 0 0}
.hero-pg{position:static !important;display:flex;gap:7px;width:auto !important}
.hero-pg .swiper-pagination-bullet{width:8px;height:8px;background:var(--tx-25);opacity:1;transition:.3s;margin:0 !important}
.hero-pg .swiper-pagination-bullet-active{background:var(--pri);width:26px;border-radius:99px}
.hero-ctrl .nav{display:flex;gap:6px}
.hero-ctrl .nav button{width:34px;height:34px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;transition:.25s}
.hero-ctrl .nav button:hover{background:var(--tx);color:#fff}

/* ============================================================
   01 퀵 카테고리 원형
   ============================================================ */
.quick{padding:44px 0 10px}
.quick-list{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.quick-list a{display:block;text-align:center;padding:12px 4px;border-radius:var(--r);transition:.3s var(--ease)}
.quick-list a:hover{background:var(--bg-2)}
.quick-list .ico{
  position:relative;width:72px;height:72px;margin:0 auto 12px;border-radius:24px;
  display:grid;place-items:center;overflow:hidden;
  font-size:11.5px;font-weight:700;color:#fff;letter-spacing:-.03em;
  transition:.35s var(--ease-out);box-shadow:var(--sh-s);
}
.quick-list a:hover .ico{transform:translateY(-7px) rotate(-5deg)}
/* 아이콘 이미지가 로드되면 텍스트 라벨(.t)은 감춘다.
   img 에 onerror="this.remove()" 가 걸려 있어 파일이 없으면 :has(img) 가 거짓 → 텍스트가 그대로 보인다 */
.quick-list .ico img{width:100%;height:100%;object-fit:contain;padding:9px;transition:.35s var(--ease-out)}
.quick-list .ico .t{font-style:normal;font-weight:700;line-height:1.25;text-align:center}
.quick-list .ico:has(img) .t{display:none}
.quick-list .ico:has(img){background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.quick-list a:hover .ico:has(img) img{transform:scale(1.08)}
.quick-list .nm{font-size:13px;font-weight:600;letter-spacing:-.03em}
.i-talk{background:#fee500;color:#3b1e1e !important}
.i-price{background:var(--grad)}
.i-1{background:linear-gradient(140deg,#4cc06f,#1f9a4b)}
.i-9{background:linear-gradient(140deg,#d2a77a,#a87b4f)}
.i-2{background:linear-gradient(140deg,#34d399,#10b981)}
.i-3{background:linear-gradient(140deg,#ff9776,#ff6b57)}
.i-4{background:linear-gradient(140deg,#ffc95c,#ffb531)}
.i-5{background:linear-gradient(140deg,#a78bfa,#8b5cf6)}
.i-6{background:linear-gradient(140deg,#f9a8d4,#f472b6)}
.i-7{background:linear-gradient(140deg,#67d3f8,#26a9f5)}
.i-8{background:linear-gradient(140deg,#94a3b8,#64748b)}

/* ============================================================
   02 카테고리 컬러 타일
   ============================================================ */
.wrap.wide{max-width:1680px}  /* 카테고리 슬라이드 전용 넓은 폭 (제목은 기본 .wrap) */
/* 카테고리 — 한 줄 슬라이더(#catSw). 사진(img/cat/cat-NN.jpg, 3:2) + 이름·상품 수 + 소분류 텍스트 링크. 사진이 없으면 같은 톤의 빈 칸 */
.cat-ph{display:block;aspect-ratio:3/2;border-radius:var(--r-s);overflow:hidden;background:#e9e5dd}
.cat-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.cat-item:hover .cat-ph img{transform:scale(1.04)}
.cat-name{display:flex;align-items:baseline;gap:10px;margin:20px 0 10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cat-name h4{font-size:20px;font-weight:800;letter-spacing:-.04em;transition:color .25s}
.cat-name .cnt{font-size:13px;color:var(--tx-45)}
.cat-name::after{
  content:'';margin-left:auto;align-self:center;width:16px;height:16px;flex:none;background:currentColor;color:var(--tx-25);transition:.3s var(--ease-out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cat-item:hover .cat-name h4{color:var(--pri)}
.cat-item:hover .cat-name::after{color:var(--pri);transform:translateX(4px)}
.cat-subs{font-size:13.5px;line-height:1.9;color:var(--tx-70);word-break:keep-all}
.cat-subs a{display:inline-block;transition:color .2s}
.cat-subs a:not(:last-child)::after{content:'·';margin:0 7px;color:var(--tx-25)}  /* 구분점을 뒤에 붙여 줄바꿈 시 행 머리에 오지 않게 */
.cat-subs a:hover{color:var(--pri)}

/* ============================================================
   02-2 친환경 배너 — 풀블리드 사진 + 짧은 카피 + 인증 마크 한 줄
   ============================================================ */
.eco-bn{
  position:relative;height:540px;overflow:hidden;color:#fff;
  background:#23402f;                                  /* 사진 없을 때 기본 배경 */
  display:flex;align-items:stretch;
}
/* 사진은 위아래로 여유를 두고 깔아 GSAP 패럴랙스 이동분을 흡수한다 */
.eco-bg{position:absolute;left:0;top:-25%;width:100%;height:150%;object-fit:cover;z-index:0}
.eco-bn::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,28,20,.72) 0%,rgba(14,28,20,.38) 55%,rgba(14,28,20,.1) 100%);
}
.eco-bn .wrap{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:center}
.eco-in{max-width:560px}
.eco-in h2{font-size:clamp(30px,3.2vw,44px);font-weight:800;line-height:1.3;letter-spacing:-.045em}
.eco-in p{margin-top:16px;font-size:16px;line-height:1.75;opacity:.88;word-break:keep-all}
.eco-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.eco-marks{
  position:absolute;left:var(--gut);right:var(--gut);bottom:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 36px;
  padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.2);
}
.eco-marks li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;opacity:.9}
.eco-marks img{height:30px;width:auto}
.eco-marks li:has(img) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ============================================================
   04 BEST 상품
   ============================================================ */
.prd{display:block;transition:.35s var(--ease)}
.prd:hover{transform:translateY(-6px)}
.prd .thumb{display:block;position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh-s)}
.prd .thumb .ph{transition:transform .8s var(--ease-out)}
.prd:hover .thumb .ph{transform:scale(1.07)}
/* 상품 사진(img/prd/prd-NN.jpg, 1:1)은 .ph 위에 깔린다. 파일이 없으면 img가 제거되어 .ph가 보인다 */
.prd .thumb img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.prd:hover .thumb img{transform:scale(1.07)}
.prd .badge{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:5px}
.prd .badge span{padding:5px 10px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--tx)}
.prd .badge .b-best{background:var(--coral)}
.prd .badge .b-new{background:var(--sky)}
.prd .badge .b-eco{background:var(--pri)}
/* 인기/추천 카드 — 고객 원고 구성: 카테고리 태그 → 상품명 → 규격·수량 → 가격 */
.shelf .prd .ct{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--bg-3);color:var(--tx-70);font-size:11px}
.shelf .prd h4{font-size:16px}
.shelf .prd .pdesc{min-height:0}
.shelf .prd .price{font-size:18px}
.shelf + .shelf{padding-top:72px}
.prd .like{
  position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--tx-45);transition:.25s;
}
.prd .like:hover{color:var(--coral)}
.prd .ct{font-size:11.5px;font-weight:700;color:var(--pri);display:block;margin-bottom:5px}
.prd h4{font-size:17px;font-weight:700;letter-spacing:-.035em;margin-bottom:5px}
.prd .pdesc{font-size:13px;color:var(--tx-45);line-height:1.55;min-height:40px}
.prd .meta{margin-top:10px;display:flex;align-items:center;gap:8px}
.prd .price{font-size:19px;font-weight:800;letter-spacing:-.04em}
.prd .price small{font-size:12px;font-weight:500;color:var(--tx-45);margin-right:3px}
.prd .off{font-size:13px;font-weight:800;color:var(--coral)}
.prd .day{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--tx-45);background:var(--bg-2);padding:4px 10px;border-radius:99px}
.sw-nav{display:flex;gap:7px}
.sw-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:#fff;transition:.25s}
.sw-nav button:hover{background:var(--tx);border-color:var(--tx);color:#fff}
.sw-nav button.swiper-button-disabled{opacity:.35;pointer-events:none}

/* ============================================================
   05 포트폴리오 (탭 + 그리드)
   ============================================================ */
.pf-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.pf-tabs button{
  padding:10px 20px;border-radius:99px;background:#fff;border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--tx-70);transition:.25s;
}
.pf-tabs button:hover{border-color:var(--pri);color:var(--pri)}
.pf-tabs button.on{background:var(--pri);border-color:var(--pri);color:#fff}
.pf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pf-item{display:block;transition:.35s var(--ease)}
.pf-item:hover{transform:translateY(-5px)}
.pf-item .thumb{display:block;position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:12px;box-shadow:var(--sh-s)}
.pf-item .thumb .ph{transition:transform .9s var(--ease-out)}
.pf-item:hover .thumb .ph{transform:scale(1.08)}
/* 포트폴리오 사진(img/pf/pf-NN.jpg, 4:3)은 .ph 위, 오버레이(.ov) 아래. 파일이 없으면 img가 제거되어 .ph가 보인다 */
.pf-item .thumb img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.pf-item:hover .thumb img{transform:scale(1.08)}
.pf-item .thumb .ov{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(20,22,28,.7),transparent 60%);
  opacity:0;transition:.35s;display:flex;align-items:flex-end;padding:16px;z-index:3;
}
.pf-item:hover .thumb .ov{opacity:1}
.pf-item .thumb .ov span{color:#fff;font-size:12.5px;font-weight:700}
.pf-item .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--pri);background:var(--pri-l);padding:3px 9px;border-radius:99px}
.pf-item h4{font-size:15px;font-weight:600;letter-spacing:-.03em;margin-top:7px}

/* ============================================================
   06 샘플 디자인 마퀴
   ============================================================ */
.mq{padding:90px 0 96px;overflow:hidden;background:var(--bg-2)}
.mq-row{display:flex;gap:16px;width:max-content;margin-bottom:16px}
.mq-row.a{animation:mqa 48s linear infinite}
.mq-row.b{animation:mqb 42s linear infinite}
.mq-row:hover{animation-play-state:paused}
@keyframes mqa{to{transform:translateX(-50%)}}
@keyframes mqb{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq-card{width:176px;flex:none;background:#fff;border-radius:var(--r);padding:10px;box-shadow:var(--sh-s);transition:.3s}
.mq-card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.mq-card .ph{border-radius:var(--r-s);margin-bottom:9px}
.mq-card .nm{font-size:12px;font-weight:600;letter-spacing:-.03em;padding:0 2px}
.mq-card .cd{font-size:10.5px;color:var(--tx-25);padding:0 2px}

/* ============================================================
   07 통계 + 프로세스
   ============================================================ */
.stat{background:var(--grad);color:#fff;padding:56px 0}
.stat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat-list dt{font-size:13px;opacity:.8;margin-bottom:8px;font-weight:500}
.stat-list dd{font-size:42px;font-weight:800;letter-spacing:-.05em;line-height:1}
.stat-list dd i{font-style:normal;font-size:17px;margin-left:2px;opacity:.85}

.pc-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pc-list li{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-l);padding:32px 28px;transition:.35s var(--ease);position:relative}
.pc-list li:hover{transform:translateY(-6px);box-shadow:var(--sh-l);border-color:transparent}
.pc-list .no{
  width:44px;height:44px;border-radius:14px;background:var(--pri-l);color:var(--pri);
  display:grid;place-items:center;font-size:15px;font-weight:800;margin-bottom:20px;transition:.35s;
}
.pc-list li:hover .no{background:var(--pri);color:#fff}
.pc-list h4{font-size:19px;font-weight:800;letter-spacing:-.04em;margin-bottom:9px}
.pc-list p{font-size:13.5px;color:var(--tx-45);line-height:1.7}
.pc-list .tag{display:inline-block;margin-top:16px;font-size:11.5px;font-weight:700;color:var(--mint);background:rgba(16,185,129,.1);padding:4px 11px;border-radius:99px}

/* ============================================================
   08 가이드 + 리뷰
   ============================================================ */
/* ---- 제작 가이드 : 풀블리드 타이포그래피 섹션 ----
   박스 + 이미지 + 버튼 조합을 버리고, 큰 활자와 여백으로 정리했다.
   CTA 는 알약 버튼 대신 밑줄이 그려지는 텍스트 링크 하나만 둔다. */
.guide{padding:104px 0 108px;border-top:1px solid var(--line-2)}
.guide-head{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px 56px;
  align-items:end;padding-bottom:56px;
}
.guide .eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--pri);margin-bottom:18px;
}
.guide h2{
  font-size:clamp(32px,4.2vw,54px);font-weight:800;line-height:1.18;letter-spacing:-.055em;
  word-break:keep-all;
}
.guide h2 em{font-style:normal;color:var(--tx-25)}
.guide .lead{
  font-size:17px;color:var(--tx-70);line-height:1.68;letter-spacing:-.025em;
  word-break:keep-all;
}
/* 텍스트 링크 — 호버 시 밑줄이 왼쪽에서 그려진다 */
.tlink{
  display:inline-flex;align-items:center;gap:7px;margin-top:22px;position:relative;
  font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--tx);
}
.tlink svg{transition:transform .34s var(--ease-out)}
.tlink::after{
  content:'';position:absolute;left:0;right:22px;bottom:-4px;height:2px;background:var(--tx);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-out);
}
.tlink:hover{color:var(--pri)}
.tlink:hover::after{transform:scaleX(1);background:var(--pri)}
.tlink:hover svg{transform:translateX(5px)}

/* 4항목 가로 나열 — 박스 없이 상단 구분선만 */
.guide-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px;counter-reset:g}
.guide-list li{
  position:relative;padding:26px 0 0;border-top:1.5px solid var(--tx);
  transition:.35s var(--ease);
}
.guide-list li + li{border-top-color:var(--line)}
.guide-list li:first-child{border-top-color:var(--tx)}
.guide-list .n{
  display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
  color:var(--tx-25);margin-bottom:14px;font-variant-numeric:tabular-nums;
}
.guide-list h3{
  font-size:19px;font-weight:800;letter-spacing:-.04em;margin-bottom:9px;
}
.guide-list p{
  font-size:14px;color:var(--tx-45);line-height:1.7;letter-spacing:-.02em;word-break:keep-all;
}
.guide-list li:hover{border-top-color:var(--pri)}
.guide-list li:hover .n{color:var(--pri)}

.rv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rv-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;transition:.35s var(--ease)}
.rv-card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.rv-card .ph{border-radius:0}
/* 후기 사진(img/rv/rv-NN.jpg, 4:3)은 .ph 안에 깔린다. 파일이 없으면 img가 제거되어 .ph가 보인다 */
.rv-card .ph img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.rv-card:hover .ph img{transform:scale(1.05)}
.rv-card .in{padding:18px 20px 20px}
.rv-card .st{display:flex;gap:2.5px;color:var(--amber);margin-bottom:9px}
.rv-card h4{font-size:15px;font-weight:700;letter-spacing:-.035em;margin-bottom:7px}
.rv-card p{font-size:13px;color:var(--tx-45);line-height:1.65}
.rv-card .by{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx-45)}
.rv-card .by b{color:var(--tx-70);font-weight:700}

/* ============================================================
   CTA
   ============================================================ */
.cta{padding:20px 0 96px}
.cta-box{
  border-radius:var(--r-l);background:var(--grad);color:#fff;text-align:center;
  padding:66px 40px;position:relative;overflow:hidden;
}
.cta-box::before,.cta-box::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.cta-box::before{width:240px;height:240px;left:-70px;bottom:-110px}
.cta-box::after{width:180px;height:180px;right:-50px;top:-70px}
.cta-box > *{position:relative;z-index:2}
.cta-box .tag{display:inline-block;padding:6px 15px;border-radius:99px;background:rgba(255,255,255,.2);font-size:11.5px;font-weight:700;letter-spacing:.06em;margin-bottom:18px}
.cta-box h3{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.32;letter-spacing:-.045em}
.cta-box p{margin-top:12px;font-size:15.5px;opacity:.85}
.cta-box .btns{margin-top:32px;display:flex;gap:11px;justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */

.ft{background:#fff;border-top:1px solid var(--line);padding:56px 0 0;font-size:13px;color:var(--tx-45)}
.ft-top{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:44px}
/* 고객센터: 출고실 삭제 후 그 자리(3열)로 이동 — 2026.10 수정 원고 */
.ft-top > .ft-cs{grid-column:3}
.ft h4{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--tx-25);margin-bottom:16px}
.ft-cs .tel{font-size:30px;font-weight:800;letter-spacing:-.045em;color:var(--pri);line-height:1;margin-bottom:12px}
.ft-cs p{font-size:12.5px;line-height:1.85}
.ft-list li{line-height:2.05}
.ft-list a:hover{color:var(--pri)}
.ft-cs + .ft-cs p{color:var(--tx-70)}
.ft-doc{display:flex;gap:6px;margin-top:16px}
.ft-doc a{padding:5px 12px;border-radius:99px;background:var(--pri-l);color:var(--pri);font-size:11.5px;font-weight:700;transition:.25s}
.ft-doc a:hover{background:var(--pri);color:#fff}
.ft-ask{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.ft-ask .btn{height:44px;border-radius:var(--r-s);font-size:13px}
.ft-mid{display:flex;align-items:center;gap:22px;padding:20px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-size:12.5px;font-weight:500}
.ft-mid a:hover{color:var(--pri)}
.ft-mid .sns{margin-left:auto;display:flex;gap:7px}
.ft-mid .sns a{width:34px;height:34px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font-size:11px;font-weight:700;transition:.25s}
.ft-mid .sns a:hover{background:var(--pri);color:#fff}
.ft-btm{padding:22px 0 44px;font-size:11.5px;color:var(--tx-25);line-height:1.95}

/* 플로팅 */
/* 우측 퀵바 — 고객 원고 구성: 마이페이지 / 장바구니 / 실시간문의 / 별도견적문의 */
.quickbar{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:700;width:76px}
.quickbar ul{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.quickbar li + li{border-top:1px solid var(--line-2)}
.quickbar a{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 4px 12px;text-align:center;
  font-size:10.5px;font-weight:700;line-height:1.3;color:var(--tx-70);letter-spacing:-.05em;transition:.25s;
}
.quickbar a svg{color:var(--tx-45);transition:.25s}
.quickbar a:hover{background:var(--pri-l);color:var(--pri)}
.quickbar a:hover svg{color:var(--pri)}
.quickbar a.ask{background:var(--pri);color:#fff}
.quickbar a.ask svg{color:#fff}
.quickbar a.ask:hover{background:var(--pri-d);color:#fff}
.totop{
  position:fixed;right:20px;bottom:24px;z-index:700;width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.35s var(--ease);
}
.totop.on{opacity:1;visibility:visible;transform:translateY(0)}


/* ---------- Responsive ---------- */
@media (max-width:1280px){
  :root{--gut:24px}
  .bn{height:320px}
  .quick-list{grid-template-columns:repeat(5,1fr)}
  .pf-grid,.rv-grid{grid-template-columns:repeat(3,1fr)}
  .sec-tit{font-size:31px}
}
@media (max-width:1024px){
  .sec{padding:70px 0}
  .logo img{width:148px}
  .hd.shrink .logo img{width:128px}
  .top-promo .wrap{padding-right:calc(var(--gut) + 96px);padding-left:var(--gut)}
  .bn{height:300px}
  .bn-in{max-width:62%}
  .bn h3{font-size:clamp(22px,3.2cqw,30px)}
  .hd-top{flex-wrap:wrap;height:auto;padding-block:14px;gap:14px}   /* padding-block — 좌우는 .wrap 여백 유지 */
  .hd.shrink .hd-top{height:auto;padding-block:10px}
  .hd.shrink .hd-search{display:none}   /* 스크롤 중에는 검색줄을 접고 → 검색 버튼으로 다시 열 수 있음 */
  .hd.shrink .hd-util a.sch{display:flex}
  .hd.shrink.search-open .hd-search{display:block;animation:schIn .22s var(--ease)}
  .hd.search-open .hd-util a.sch{color:var(--pri)}
  .hd-search{order:3;flex-basis:100%;max-width:100%}
  .gnb-bar{display:none}
  .eco-bn{height:auto;min-height:480px}
  .eco-bn .wrap{padding-top:72px;padding-bottom:0}
  .eco-marks{position:static;margin-top:56px}
  .guide{padding:76px 0 80px}
  .guide-head{grid-template-columns:1fr;gap:26px;align-items:start;padding-bottom:42px}
  .guide-list{grid-template-columns:repeat(2,1fr);gap:0 32px}
  .guide-list li:nth-child(n+3){margin-top:26px}
  .guide-list li:nth-child(2){border-top-color:var(--line)}
  .pc-list{grid-template-columns:repeat(2,1fr)}
  .stat-list{grid-template-columns:repeat(2,1fr);gap:26px}
  .pf-grid,.rv-grid{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-top > .ft-cs{grid-column:auto}
  .quickbar{display:none}
}
@media (max-width:640px){
  body{font-size:14px}
  .sec{padding:54px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:26px}
  .sec-tit{font-size:25px}
  .hd-util a{width:48px;font-size:10px}
  .bn{height:240px}
  .bn-in{padding:26px 24px;max-width:66%}
  .bn h3{font-size:clamp(18px,4.6cqw,23px)}
  .bn p{display:none}
  .bn .go{margin-top:18px}
  .bn-obj{width:40%;max-width:150px;right:10px}
  /* 프로모션 바 : 고정 높이를 풀고 2줄까지 허용, 닫기는 X 아이콘만 */
  .top-promo{font-size:11.5px}
  .top-promo .wrap{
    height:auto;min-height:38px;padding:8px 34px 8px var(--gut);
    gap:7px;justify-content:flex-start;align-items:flex-start;
  }
  .top-promo b{font-size:9.5px;padding:2px 7px;margin-top:1px}
  .top-promo .wrap > span{
    white-space:normal;line-height:1.4;letter-spacing:-.02em;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .top-promo .close{
    right:11px;gap:0;font-size:0;   /* 라벨 숨김, 아이콘만 — 세로 중앙은 기본 규칙(top:50%) 유지 */
  }
  .top-promo .close svg.i-x{width:12px;height:12px}
  .logo img{width:118px}
  .hd.shrink .logo img{width:108px}
  .hd-util a{width:44px;font-size:10px;gap:3px}
  .hd-util a svg{width:18px;height:18px}
  .hd-util a.ord{display:none}   /* 주문내역 — 마이페이지에서 접근 */
  .hd-util b{right:4px;min-width:16px;height:16px;font-size:9.5px}
  .hd-util .join{display:none}
  .quick-list{grid-template-columns:repeat(5,1fr);gap:2px}   /* 10개 → 5×2 (4열이면 마지막 줄에 2개만 남음) */
  .quick-list a{padding:8px 0}
  /* 모바일에선 GNB가 숨겨져 이 아이콘들이 주 내비게이션 — 칸 폭을 거의 다 쓰고 안쪽 여백을 줄여 그림을 키움 */
  .quick-list .ico{width:min(60px,100%);height:auto;aspect-ratio:1;border-radius:18px;font-size:10px;margin-bottom:8px}
  .quick-list .ico img{padding:5px}
  .quick-list .nm{font-size:11px;letter-spacing:-.05em;white-space:nowrap}
  .demo-legend{display:none}
  .pf-grid,.rv-grid,.pc-list,.stat-list{grid-template-columns:1fr}
  .cat-name{margin:12px 0 6px;padding-bottom:8px;gap:6px}
  .cat-name h4{font-size:16px}
  .cat-name .cnt{font-size:11.5px}
  .cat-name::after{width:13px;height:13px}
  .cat-subs{font-size:12.5px;line-height:1.75}
  .cat-subs a:not(:last-child)::after{margin:0 5px}
  .guide{padding:58px 0 62px}
  .guide .lead{font-size:15.5px}
  .guide-list{grid-template-columns:1fr;gap:0}
  .guide-list li{padding:20px 0 22px}
  .guide-list li:nth-child(n+2){margin-top:0;border-top-color:var(--line)}
  .eco-bn .wrap{padding-top:56px}
  .eco-in p br{display:none}
  .eco-btns .btn{flex:1}
  .eco-marks{gap:10px 22px;margin-top:44px}
  .ft-top{grid-template-columns:1fr}
  .cta-box{padding:44px 24px}
}

/* ---------- 간격 미세 조정 ---------- */
.quick + .sec{padding-top:54px}

/* ============================================================
   잎사귀 장식 (메인) — 섹션 제목의 초록 강조 글자(em) 끝에서 돋아난다
   글자에 붙어 있어 화면 폭과 상관없이 같은 자리. 크기는 em 단위라 제목 크기를 따라간다.
   잎 줄기(왼쪽 아래)가 글자 오른쪽 위 끝에 닿도록 놓고, 그 점을 축으로 피고 흔들린다.
   기본 opacity:0 → main.js(GSAP)가 피워낸다. GSAP 가 없으면 보이지 않는다
   ============================================================ */
.sec-tit em:has(.leaf){position:relative}
.leaf{
  position:absolute;pointer-events:none;
  left:calc(100% - .12em);bottom:calc(100% - .2em);
  width:.56em;height:.56em;
  color:var(--pri);opacity:0;transform-origin:12% 88%;
}
.leaf svg{display:block;width:100%;height:100%;transform-origin:12% 88%}
.leaf.l2{left:calc(100% + .3em);bottom:calc(100% - .02em);width:.36em;height:.36em;color:var(--mint)}
@media (max-width:640px){
  .leaf.sm-hide{display:none}
}

/* ============================================================
   ▼▼▼ 시연용 인디케이터 — 납품 시 이 블록 전체 삭제 ▼▼▼
   js/main.js 의 demoIndicator() IIFE 도 함께 삭제하면 완전히 제거된다.
   HTML 원본에는 아무것도 추가하지 않는다 (JS가 <i>를 주입).
   ※ ::after / ::before 를 쓰지 않는다 — .gnb > li > a::after(활성 밑줄),
     .gnb > li > a::before(호버 브릿지)와 충돌하기 때문.
   ============================================================ */
:root{--demo:#ef4444}

/* 서브메뉴 항목용 — 글자 바로 뒤에 인라인으로 붙는다 */
i.demo-dot{
  display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;
  background:var(--demo,#ef4444);vertical-align:middle;flex:none;
  box-shadow:0 0 0 1.5px #fff,0 0 6px rgba(239,68,68,.6);
  animation:demoPulse 2.4s ease-in-out infinite;
}
@keyframes demoPulse{0%,100%{opacity:1}50%{opacity:.4}}


/* 범례 */
.demo-legend{
  position:fixed;left:20px;bottom:20px;z-index:700;display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:99px;background:rgba(20,22,28,.9);backdrop-filter:blur(8px);
  color:#fff;font-size:11.5px;font-weight:600;box-shadow:var(--sh);
}
.demo-legend i{
  width:6px;height:6px;border-radius:50%;background:var(--demo,#ef4444);flex:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 0 6px rgba(239,68,68,.7);
}
.demo-legend em{font-style:normal;opacity:.5;font-weight:500}
@media (max-width:640px){
  .demo-legend{left:12px;bottom:12px;font-size:10.5px;padding:7px 11px}
  body:has(.mbar) .demo-legend{bottom:84px}   /* 주문 페이지 하단 견적바 위로 */
}
/* ▲▲▲ 시연용 인디케이터 끝 ▲▲▲ */

/* ============================================================
   터치 기기: 탭한 뒤 :hover 상태가 남아 박스가 떠 있는 문제 방지
   ============================================================ */
@media (hover:none){
  .quick-list a:hover{background:none}
  .quick-list a:hover .ico,.quick-list a:hover .ico:has(img) img{transform:none}
  .prd:hover .thumb .ph,.pf-item:hover .thumb .ph{transform:none}
  .cards label:hover .card{transform:none}
}
@media (max-width:359px){
  :root{--gut:16px}
  .quick-list .ico img{padding:4px}
  .hd-top{gap:8px}
  .logo img,.hd.shrink .logo img{width:100px}
  .hd-util{gap:2px}
  .hd-util a{width:38px}
  .quick-list .ico{border-radius:14px}
  .quick-list .nm{font-size:10.5px}
}

/* 모바일: 시연용 범례가 콘텐츠를 가리므로 숨김 (데모 블록보다 뒤에 있어야 적용됨) */
@media (max-width:640px){.demo-legend{display:none}}