/* LENIF Partner Catalog 2026 — extracted styles */
/* ============================================================
LENIF Partner Catalog 2026 — Design System v1
============================================================ */
:root{
/* ── Color ── */
--lenif-black:#1A1A1A; /* 잉크/제목 */
--lenif-body:#3A3A3A; /* 본문 */
--lenif-meta:#8C8B88; /* 보조/메타 */
--lenif-line:#E8E6E1; /* 구분선/테두리 */
--lenif-orange:#F2874B; /* 액센트 (브랜드) */
--lenif-orange-bg:#FFF3EC; /* 액센트 배경 */
--lenif-white:#FFFFFF; /* 배경/카드 */
--lenif-bg-soft:#F5F4F1; /* 로딩 스켈레톤/연배경 */
/* ── Spacing scale (4px base) ── */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;
--sp-9:36px; --sp-10:48px; --sp-12:60px;
/* ── Radius ── */
--radius:2px; /* 기본 (버튼·카드·배지) */
--radius-pill:999px; /* 알약형 */
/* ── Typography scale ── */
--fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px;
--fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px;
/* ── Layout (단일 소스 — sticky/프레임 수식이 전부 참조) ── */
--nav-h:48px; /* sticky nav 높이 = wz-head-row sticky offset */
--frame-w:390px; /* 데스크탑 phone 프레임 폭 */
--frame-half:195px; /* frame-w / 2 (중앙 정렬용) */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:calc(var(--nav-h) + 24px)} /* sticky nav + breathing room */
html,body{
font-family:
"Pretendard Variable", "Pretendard",
"Apple SD Gothic Neo",
-apple-system, BlinkMacSystemFont,
"Noto Sans KR", "Nanum Gothic",
"Malgun Gothic", "맑은 고딕",
system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
color:var(--lenif-body);
background:var(--lenif-white);
line-height:1.75;
font-weight:400;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
word-break:keep-all;
font-feature-settings:"tnum";
}
body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:0}
/* ---------- iPhone 13 viewport — frame 없이 사이즈만 ---------- */
.phone{
width:var(--frame-w);
min-height:100vh;
background:var(--lenif-white);
position:relative;
}
@media (max-width:430px){
.phone{width:100vw}
}
/* ---------- Top nav ---------- */
.nav{
height:var(--nav-h);padding:0 24px;
display:flex;justify-content:space-between;align-items:center;
border-bottom:1px solid var(--lenif-line);
background:var(--lenif-white);
position:sticky;top:0;z-index:30;
}
.nav .brand{
font-size:15px;font-weight:800;letter-spacing:-0.01em;color:var(--lenif-black);
display:flex;align-items:center;
background:none;border:none;padding:0;margin:0;
font-family:inherit;cursor:pointer;line-height:1;
transition:opacity .15s;
}
.nav .brand:hover{opacity:0.62}
.nav .brand:active{opacity:0.45}
.nav .brand:focus-visible{
outline:2px solid var(--lenif-orange);outline-offset:3px;border-radius:2px;
}
.nav .brand .brand-symbol{
height:19px;width:auto;display:block;margin-right:9px;
flex-shrink:0;
}
.nav .brand .sep{color:var(--lenif-orange);margin:0 6px}
.nav .menu{font-size:13px;color:var(--lenif-meta);display:flex;gap:16px}
.nav .menu span{cursor:pointer}
/* ---------- Scroll container ---------- */
.scroll{padding-bottom:96px}
/* ---------- Section base ---------- */
section{padding:60px 24px;scroll-margin-top:72px}
section + section{padding-top:0}
/* ---------- Common atoms ---------- */
.lbl{
font-size:13px;letter-spacing:0.12em;
color:var(--lenif-orange);font-weight:700;
margin:0 0 8px;
}
.lbl-sm{
font-size:11px;letter-spacing:0.14em;
color:var(--lenif-orange);font-weight:700;
margin:0 0 6px;
}
/* ── Link utilities (반복 인라인 style 대체) ── */
.lk{color:var(--lenif-orange);text-decoration:underline}
.lk-b{color:var(--lenif-orange);text-decoration:underline;font-weight:700}
.lk-plain{color:inherit;text-decoration:underline}
/* ── 은은한 프리미엄 모션 (GPU opacity/transform · 완료 보장 · reduced-motion 안전) ── */
.img-fade{opacity:0;transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.img-fade.img-in{opacity:1}
/* 카드·버튼 미세 hover lift — 데스크탑(hover 지원) 한정, 모바일 영향 0 */
@media (hover:hover) and (pointer:fine){
.pcard,.btn,.ext-shop,.wz-rec-card,.color-chip{
transition:transform .22s cubic-bezier(.16,1,.3,1),
box-shadow .22s cubic-bezier(.16,1,.3,1);
}
.pcard:hover{transform:translateY(-2px)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(26,26,26,.10)}
.btn-ghost:hover{transform:translateY(-1px)}
.ext-shop:hover{transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){
.img-fade{opacity:1;transition:none}
.pcard,.btn,.ext-shop,.wz-rec-card,.color-chip{transition:none}
.pcard:hover,.btn:hover,.ext-shop:hover{transform:none;box-shadow:none}
}
.sub-h{
font-size:15px;color:var(--lenif-meta);
margin:0 0 6px;line-height:1.5;font-weight:400;
}
.h-main{
font-size:34px;font-weight:700;line-height:1.2;
letter-spacing:-0.025em;color:var(--lenif-black);
margin:0 0 24px;
}
.h-sec{
font-size:28px;font-weight:700;line-height:1.25;
letter-spacing:-0.02em;color:var(--lenif-black);
margin:0 0 22px;
}
.h-card{
font-size:18px;font-weight:700;line-height:1.4;
letter-spacing:-0.01em;color:var(--lenif-black);
margin:0 0 10px;
}
.lead{
font-size:16px;line-height:1.75;color:var(--lenif-body);
margin:0 0 24px;
}
.body-p{
font-size:15px;line-height:1.75;color:var(--lenif-body);
margin:0 0 24px;
}
.meta{
font-size:13px;color:var(--lenif-meta);line-height:1.6;
margin:0;
}
strong.k{
background:var(--lenif-orange-bg);
color:var(--lenif-black);
font-weight:700;padding:0 2px;
}
hr.div{
border:none;border-top:1px solid var(--lenif-line);
margin:48px 0;
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
font-size:14px;font-weight:700;letter-spacing:-0.005em;
padding:15px 18px;border-radius:2px;cursor:pointer;
border:1px solid transparent;transition:opacity .12s;
font-family:inherit;
}
.btn:active{opacity:.85}
.btn-primary{background:var(--lenif-black);color:var(--lenif-white)}
.btn-ghost{background:var(--lenif-white);color:var(--lenif-black);border-color:var(--lenif-line)}
.btn-orange{background:var(--lenif-orange);color:var(--lenif-white)}
.btn-block{width:100%}
.btn .arr{margin-left:2px}
/* ---------- Cover ---------- */
.cover{
padding:48px 24px 64px;
display:flex;flex-direction:column;gap:36px;
}
.cover-brand{display:flex;align-items:center;gap:14px}
.cover-symbol{
height:46px;width:auto;display:block;flex-shrink:0;
animation:cover-symbol-in .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cover-symbol-in{
from{opacity:0;transform:translateY(6px) scale(.94)}
to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
.cover-symbol{animation:none}
}
.cover-brand-tx{display:flex;flex-direction:column}
.cover .wm{font-size:23px;font-weight:800;letter-spacing:-0.015em;color:var(--lenif-black);line-height:1}
.cover .yr{font-size:11px;letter-spacing:0.06em;color:var(--lenif-meta);margin-top:7px}
.cover h1{
font-size:38px;font-weight:700;line-height:1.18;letter-spacing:-0.025em;
color:var(--lenif-black);margin:0;
}
.cover h1 em{font-style:normal;color:var(--lenif-orange)}
.cover .sub{font-size:15px;color:var(--lenif-meta);margin-top:18px;line-height:1.7}
.cover .cta-row{margin-top:32px;display:flex;gap:8px}
/* ---------- Step Connector (4.1) ---------- */
.step{
border-top:1px solid var(--lenif-line);
}
.step .row{
display:flex;align-items:flex-start;
padding:20px 0;
border-bottom:1px solid var(--lenif-line);
}
.step .row .num{
width:48px;flex-shrink:0;
font-size:15px;color:var(--lenif-orange);font-weight:700;
letter-spacing:0.06em;line-height:1.4;
}
.step .row .body{flex:1;min-width:0}
/* OPTIONS 블록 — 가격 라벨 ('+₩30,000') 한 줄 유지 + 본문과 적정 간격 */
.step-options .row .num{
width:auto;min-width:92px;padding-right:14px;
white-space:nowrap;font-size:14px;
}
.step .row .body .t{
font-size:16px;font-weight:700;color:var(--lenif-black);
margin:0 0 6px;line-height:1.4;
}
.step .row .body .d{
font-size:14px;color:var(--lenif-meta);
margin:0;line-height:1.7;
}
.step .row .body .d .v{color:var(--lenif-black);font-weight:700}
/* ---------- Orange Accent Line (4.3) ---------- */
.accent-block{
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
margin:0 0 24px;
}
.accent-line{
font-size:17px;line-height:1.55;color:var(--lenif-black);
margin:0;padding:14px 0 14px 18px;
border-left:2px solid var(--lenif-orange);
font-weight:400;
}
.accent-line + .accent-line{border-top:1px solid var(--lenif-line)}
/* 출하지 위치 — 디테일을 원하는 고객용 미니멀 정보 카드 (아이콘 없음) */
.ship-origin{
margin:10px 0 2px;padding:11px 0 11px 14px;
border-left:2px solid var(--lenif-orange);
background:var(--lenif-bg-soft);
}
.ship-origin .so-tag{
display:block;font-size:10px;font-weight:800;
color:var(--lenif-orange);letter-spacing:0.16em;
text-transform:uppercase;margin:0 0 4px;
}
.ship-origin .so-addr{
font-size:12px;color:var(--lenif-black);font-weight:600;
line-height:1.5;margin:0 0 6px;
}
.ship-origin .so-link{
font-size:11.5px;color:var(--lenif-orange);font-weight:700;
text-decoration:none;letter-spacing:0.01em;
}
.ship-origin .so-link:hover{text-decoration:underline}
/* ---------- Minimal Border Grid (4.4) ---------- */
.grid-2{
display:grid;grid-template-columns:repeat(2,1fr);
border-top:1px solid var(--lenif-line);
border-left:1px solid var(--lenif-line);
margin:0 0 28px;
}
.grid-2 .cell{
padding:20px 14px;text-align:center;
border-right:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
}
.grid-2 .cell .l{
font-size:11px;letter-spacing:0.14em;
color:var(--lenif-orange);font-weight:700;
margin:0 0 6px;
}
.grid-2 .cell .v{
font-size:16px;font-weight:700;color:var(--lenif-black);
margin:0;line-height:1.4;
}
/* ---------- Inline List (4.5) ---------- */
.ilist{
font-size:15px;line-height:2;color:var(--lenif-body);
margin:0 0 28px;
}
.ilist .n{color:var(--lenif-orange);letter-spacing:0.06em;font-weight:700;margin-right:8px}
/* ---------- Border-Bottom Stack (4.6) ---------- */
.bstack{border-top:1px solid var(--lenif-line);margin:0 0 28px}
.bstack .item{
padding:22px 0;
border-bottom:1px solid var(--lenif-line);
}
.bstack .item .t{
font-size:16px;font-weight:700;color:var(--lenif-black);
margin:0 0 8px;line-height:1.5;
}
.bstack .item .d{
font-size:14px;color:var(--lenif-body);
margin:0;line-height:1.75;
}
.bstack .item .m{
font-size:12px;color:var(--lenif-meta);
margin:6px 0 0;line-height:1.5;
}
/* ---------- Product cards (Vertical Large Layout — 제품에 집중) ---------- */
.pcard-stack{
border-top:1px solid var(--lenif-line);
margin:0 0 32px;
}
/* 가로 배치 — 큰 이미지 + 우측 정보, 보더리스 */
.pcard{
display:flex;flex-direction:row;align-items:center;
padding:20px 0;
border-bottom:1px solid var(--lenif-line);
text-decoration:none;color:inherit;
gap:18px;
position:relative; /* 큐 앵커 */
transition:transform .12s ease;
}
/* 이미지 래퍼 — 스마트로더는 내부 .ph 만 교체, 래퍼는 유지 */
.pcard .pthumb{
flex:0 0 48%;
aspect-ratio:4/5;
position:relative;
display:block;
}
/* 클릭 가능 인지 — 카드 우하단 코너의 원형 '›' 컨트롤.
absolute 오버레이(텍스트 flow 밖) → .info 가 가로 폭 100% 회복(가독성)
· 세로 중앙의 짧은 텍스트 블록 아래 빈 코너에 위치 → 텍스트·이미지 비가림
· 전 기기 동일 · CSS only */
.pcard::after{
content:"›";
position:absolute;right:0;bottom:14px;
box-sizing:border-box;
width:30px;height:30px;border-radius:var(--radius-pill);
display:flex;align-items:center;justify-content:center;
background:var(--lenif-white);
border:1px solid var(--lenif-orange);
color:var(--lenif-orange);
font-size:16px;font-weight:800;line-height:1;
padding-left:1px; /* 시각적 광학 중심 보정 */
box-shadow:0 1px 5px rgba(242,135,75,.18);
pointer-events:none;
transition:background .16s ease, color .16s ease, transform .16s ease;
}
.pcard:hover::after,
.pcard:focus-visible::after{
background:var(--lenif-orange);color:#fff;
transform:translateX(2px);
}
.pcard:active{ transform:scale(.994) }
.pcard:active::after{ background:var(--lenif-orange);color:#fff }
@media (prefers-reduced-motion:reduce){
.pcard::after{transition:none}
.pcard:hover::after,.pcard:active::after{transform:none}
}
/* 제품 이미지 — 가능한 크게 (카드 절반 폭), 보더리스 */
.pcard .pthumb .thumb{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
font-size:10px;color:var(--lenif-meta);letter-spacing:0.12em;
font-weight:700;
}
.pcard .info{
flex:1;min-width:0;
/* 큐는 absolute 오버레이라 가로 폭을 잠식하지 않음 → 가로 폭 100% 사용.
무공백 토큰만 줄바꿈하여 카드 밖 넘침 방지(한글 단어는 유지) */
overflow-wrap:anywhere;
word-break:keep-all;
}
/* 제품명 — 확 인지되는 큰 크기 */
.pcard .info .n{
font-size:20px;font-weight:700;color:var(--lenif-black);
letter-spacing:-0.025em;line-height:1.25;
margin:0 0 8px;
}
/* 가격 — 보조 강조 */
.pcard .info .p{
font-size:15px;color:var(--lenif-black);margin:0 0 9px;
font-feature-settings:"tnum";line-height:1.4;
}
.pcard .info .p .lbl{
color:var(--lenif-meta);margin-right:5px;
font-size:10px;letter-spacing:0.06em;font-weight:700;
text-transform:uppercase;
}
.pcard .info .p .k{font-size:17px;white-space:nowrap}
/* 적용 공간 태그 — 깔끔한 메타.
하단 두 줄(.u/.usp)만 우하단 큐(30px) 통로를 비워 둠
→ 제목(.n)·가격(.p)은 가로 폭 100% 유지(핵심 가독성), 큐 비가림 보장 */
.pcard .info .u{
font-size:12px;color:var(--lenif-meta);
margin:0 0 8px;line-height:1.5;
padding-right:40px;
}
/* USP — 오렌지 액센트 */
.pcard .info .usp{
font-size:11px;color:var(--lenif-orange);font-weight:700;
letter-spacing:0.04em;margin:0;line-height:1.4;
padding-right:40px;
}
/* ---------- Tabs ---------- */
.tabs{
display:flex;gap:6px;overflow-x:auto;
padding:2px 0 12px;margin:0 -4px 24px;
scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
flex:0 0 auto;
padding:9px 14px;font-size:13px;font-weight:400;
border:1px solid var(--lenif-line);
background:var(--lenif-white);
color:var(--lenif-body);white-space:nowrap;
cursor:pointer;
}
.tab.is-active{
background:var(--lenif-black);color:var(--lenif-white);
border-color:var(--lenif-black);font-weight:700;
}
/* Use-case pane — 7 personas */
.uc-pane{margin-top:8px}
.uc-pane[hidden]{display:none}
/* 사용 사례 — 실제 도입 사진 (4:3) */
.uc-hero{
aspect-ratio:4/3;background:var(--lenif-bg-soft);
margin:16px 0 22px;
border:1px solid var(--lenif-line);
overflow:hidden;border-radius:2px;
display:flex;align-items:center;justify-content:center;
font-size:11px;letter-spacing:0.16em;color:var(--lenif-meta);font-weight:700;
}
img.uc-hero.asset-img{
width:100%;height:100%;object-fit:cover;display:block;
border:none;border-radius:2px;
}
/* 1줄 1대 — 사진 풀폭 세로 스택 (사진으로 보고 이해) */
.uc-hero-grid{
display:grid;grid-template-columns:1fr;gap:22px;
margin:16px 0 22px;
}
.uc-hero-grid .uc-hero{margin:0;aspect-ratio:4/3}
/* 공간 스와이프 페이저 — 사진 보다가 좌우로 넘겨 다른 공간 이동 (인지 가능) */
.uc-pager{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:14px;margin:22px 0 20px;
padding:12px 0;border-top:1px solid var(--lenif-line);
}
.ucp-arrow{
background:none;border:none;cursor:pointer;font-family:inherit;
font-size:22px;line-height:1;color:var(--lenif-orange);
padding:4px 12px;min-width:40px;
transition:opacity .15s;
}
.ucp-arrow:hover{opacity:0.6}
.ucp-arrow:active{transform:translateY(1px)}
.ucp-arrow:focus-visible{outline:2px solid var(--lenif-orange);outline-offset:2px;border-radius:2px}
.ucp-dots{display:inline-flex;align-items:center;gap:8px}
.ucp-dot{
width:7px;height:7px;border-radius:var(--radius-pill);
background:var(--lenif-line);cursor:pointer;display:block;
transition:background .15s,transform .15s;
}
.ucp-dot.is-on{background:var(--lenif-orange);transform:scale(1.35)}
.ucp-dot:focus-visible{outline:2px solid var(--lenif-orange);outline-offset:3px}
.ucp-hint{
flex-basis:100%;text-align:center;
font-size:11px;color:var(--lenif-meta);letter-spacing:0.01em;margin-top:2px;
}
.ucp-hint strong{color:var(--lenif-orange);font-weight:700}
/* 스와이프 전환 — 스크롤 고정, 제자리에서 부드러운 크로스페이드 */
@keyframes ucPaneIn{
from{opacity:0;transform:translateX(7px)}
to{opacity:1;transform:none}
}
.uc-pane.uc-anim{animation:ucPaneIn .42s cubic-bezier(.33,1,.45,1) both}
@media (prefers-reduced-motion:reduce){
.uc-pane.uc-anim{animation:none}
}
/* 화면 좌·우 엣지 화살표 — 사진 보는 중 은은하게 (탭/스와이프 보조) */
.uc-edge{
position:fixed;top:50%;transform:translateY(-50%);z-index:24;
width:38px;height:64px;padding:0;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.66);
border:1px solid var(--lenif-line);
color:var(--lenif-black);font-family:inherit;font-size:24px;line-height:1;
cursor:pointer;border-radius:var(--radius);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;pointer-events:none;
transition:opacity .3s ease, background .15s;
}
.uc-edge.is-shown{opacity:.34;pointer-events:auto}
.uc-edge.is-shown:hover{opacity:.92;background:#fff}
.uc-edge:active{transform:translateY(-50%) scale(.94)}
.uc-edge:focus-visible{outline:2px solid var(--lenif-orange);outline-offset:2px}
.uc-edge.is-end{opacity:0 !important;pointer-events:none}
.uc-edge-prev{left:4px}
.uc-edge-next{right:4px}
@media (min-width:431px){
/* 데스크탑 — 가운데 정렬된 phone 프레임 안쪽 가장자리에 부착 */
.uc-edge-prev{left:calc(50% - var(--frame-half) + 4px)}
.uc-edge-next{right:calc(50% - var(--frame-half) + 4px)}
}
/* Product pane — 5 통합 탭 */
.pd-pane{margin-top:8px}
.pd-pane[hidden]{display:none}
.pd-tabs{margin-bottom:24px !important}
/* 제품 상세 모드 — 랜딩 섹션 모두 숨김 */
.phone.mode-product #cover,
.phone.mode-product #why,
.phone.mode-product #matrix,
.phone.mode-product #usecase,
.phone.mode-product #terms,
.phone.mode-product #quote,
.phone.mode-product #about,
.phone.mode-product #contact,
.phone.mode-product footer{display:none !important}
/* 견적 위저드 모드 — 견적 풀스크린 전용 화면 */
#quote{display:none}
.phone.mode-quote #quote{display:block}
.phone.mode-quote #cover,
.phone.mode-quote #why,
.phone.mode-quote #matrix,
.phone.mode-quote #usecase,
.phone.mode-quote #products,
.phone.mode-quote #terms,
.phone.mode-quote #about,
.phone.mode-quote #showroom,
.phone.mode-quote #contact,
.phone.mode-quote footer,
.phone.mode-quote .sticky-cta{display:none !important}
/* 견적 모드 — 카탈로그로 돌아가기 버튼 (상단) */
.wz-back{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:700;color:var(--lenif-meta);
text-decoration:none;margin:0 0 18px;
padding:8px 0;letter-spacing:-0.005em;
background:none;border:none;cursor:pointer;
font-family:inherit;
}
.wz-back:hover{color:var(--lenif-black)}
.wz-back .arr-l{font-size:15px;line-height:1}
/* 위저드 헤더 — 좌: 돌아가기 / 우: 전화상담
스크롤로 사라지지 않게 nav(48px) 바로 아래 고정 */
.wz-head-sentinel{height:1px;margin:0;padding:0}
.wz-head-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
position:sticky;top:var(--nav-h);z-index:20;
background:var(--lenif-white);
margin:0 -24px 14px;padding:11px 24px;
border-bottom:1px solid transparent;
transition:box-shadow .2s ease, border-color .2s ease;
}
.wz-head-row.is-stuck{
border-bottom-color:var(--lenif-line);
box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.wz-head-row .wz-back{margin:0;padding:6px 0}
.wz-consult-btn{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
font-family:inherit;font-size:13px;font-weight:800;
color:var(--lenif-black);background:var(--lenif-bg-soft);
border:none;
padding:9px 15px;border-radius:var(--radius-pill);
cursor:pointer;letter-spacing:-0.005em;line-height:1;
transition:background .15s,color .15s;
}
.wz-consult-btn .wz-consult-ic{font-size:13px;line-height:1;color:var(--lenif-meta)}
.wz-consult-btn:hover{background:#ECEAE4;color:var(--lenif-black)}
.wz-consult-btn:active{transform:translateY(1px)}
.wz-consult-btn:focus-visible{outline:2px solid var(--lenif-black);outline-offset:2px}
/* ---------- 상담 시트 (bottom-sheet · 트리거 클릭 시에만) ---------- */
.consult-sheet[hidden]{display:none}
.consult-sheet{
position:fixed;inset:0;z-index:90;
display:flex;align-items:flex-end;
}
.consult-backdrop{
position:absolute;inset:0;
background:rgba(20,18,16,.46);
backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
animation:consult-fade .2s ease both;
}
.consult-panel{
position:relative;width:100%;
background:var(--lenif-white);
border-radius:14px 14px 0 0;
padding:14px 24px calc(28px + env(safe-area-inset-bottom));
box-shadow:0 -10px 40px rgba(0,0,0,.18);
animation:consult-up .26s cubic-bezier(.22,1,.36,1) both;
max-height:84vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
@keyframes consult-fade{from{opacity:0}to{opacity:1}}
@keyframes consult-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
.consult-backdrop,.consult-panel{animation:none}
}
.consult-grip{
display:block;width:38px;height:4px;border-radius:999px;
background:var(--lenif-line);margin:0 auto 14px;
}
.consult-x{
position:absolute;top:12px;right:16px;
background:none;border:none;cursor:pointer;
font-size:16px;color:var(--lenif-meta);padding:6px;line-height:1;
font-family:inherit;
}
.consult-x:hover{color:var(--lenif-black)}
.consult-title{
font-size:22px;font-weight:800;letter-spacing:-0.02em;
color:var(--lenif-black);margin:2px 0 8px;line-height:1.25;
}
.consult-lead{
font-size:13px;color:var(--lenif-body);line-height:1.65;
margin:0 0 18px;
}
.consult-lead .k{color:var(--lenif-black);font-weight:700}
.consult-rows{margin-top:18px;border-top:1px solid var(--lenif-line)}
.consult-row{
font-size:12.5px;color:var(--lenif-body);line-height:1.6;
padding:12px 0;border-bottom:1px solid var(--lenif-line);
}
.consult-row .ck{
display:block;font-size:11px;font-weight:800;
color:var(--lenif-black);letter-spacing:0.01em;margin-bottom:2px;
}
/* 데스크탑 — phone 폭(390) 안에 중앙 정렬 */
@media (min-width:431px){
.consult-sheet{left:50%;right:auto;width:var(--frame-w);margin-left:calc(var(--frame-half) * -1)}
}
/* ---------- 구성 후 담기 시트 (색상·옵션 사전 설정 → 장바구니) ---------- */
.wz-cfg-sheet[hidden]{display:none}
.wz-cfg-sheet{
position:fixed;inset:0;z-index:95;
display:flex;align-items:flex-end;
}
.wz-cfg-backdrop{
position:absolute;inset:0;
background:rgba(20,18,16,.46);
backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
animation:consult-fade .2s ease both;
}
.wz-cfg-panel{
position:relative;width:100%;
display:flex;flex-direction:column;
background:var(--lenif-white);
border-radius:14px 14px 0 0;
box-shadow:0 -10px 40px rgba(0,0,0,.18);
animation:consult-up .26s cubic-bezier(.22,1,.36,1) both;
max-height:88vh;
}
@media (prefers-reduced-motion:reduce){
.wz-cfg-backdrop,.wz-cfg-panel{animation:none}
}
.wz-cfg-grip{
display:block;width:38px;height:4px;border-radius:999px;
background:var(--lenif-line);margin:12px auto 4px;flex-shrink:0;
}
.wz-cfg-head{
position:relative;padding:6px 24px 14px;
border-bottom:1px solid var(--lenif-line);flex-shrink:0;
}
.wz-cfg-head .lbl-sm{
font-size:10px;letter-spacing:0.12em;color:var(--lenif-orange);
font-weight:800;text-transform:uppercase;display:block;margin:0 0 4px;
}
.wz-cfg-head h3{
font-size:19px;font-weight:800;letter-spacing:-0.02em;
color:var(--lenif-black);margin:0;line-height:1.25;
}
.wz-cfg-head p{
font-size:12px;color:var(--lenif-meta);margin:4px 0 0;line-height:1.5;
}
.wz-cfg-x{
position:absolute;top:2px;right:16px;
background:none;border:none;cursor:pointer;
font-size:18px;color:var(--lenif-meta);padding:6px;line-height:1;
font-family:inherit;
}
.wz-cfg-x:hover{color:var(--lenif-black)}
.wz-cfg-body{
padding:8px 24px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;
flex:1;min-height:0;
}
.wz-cfg-body > .wz-color-block:first-child,
.wz-cfg-body > .wz-options-block:first-child{
border-top:none;margin-top:6px;padding-top:0;
}
.wz-cfg-foot{
display:flex;align-items:center;gap:12px;
padding:14px 24px calc(18px + env(safe-area-inset-bottom));
border-top:1px solid var(--lenif-line);
background:var(--lenif-white);flex-shrink:0;
}
.wz-cfg-sums{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#wz-cfg-qty{
font-size:11px;font-weight:700;color:var(--lenif-meta);
font-feature-settings:"tnum";letter-spacing:0.01em;
}
#wz-cfg-price{
font-size:14px;font-weight:800;color:var(--lenif-black);
font-feature-settings:"tnum";letter-spacing:-0.01em;
}
.wz-cfg-foot .btn{flex-shrink:0}
.wz-cfg-foot .wz-cfg-cancel{padding:13px 14px;font-size:13px}
.wz-cfg-foot #wz-cfg-add{padding:13px 18px;font-size:14px}
.wz-cfg-foot #wz-cfg-add:disabled{opacity:.4;cursor:not-allowed}
body.wz-cfg-lock{overflow:hidden}
@media (min-width:431px){
.wz-cfg-sheet{left:50%;right:auto;width:var(--frame-w);margin-left:calc(var(--frame-half) * -1)}
}
/* 체험 옵션 (샘플 + 체험관) — 2-column grid */
.try-row{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.try-row .btn{padding:14px 8px;font-size:13px}
/* 체험관 카드 — 이미지 + 정보 */
.showroom{
margin:48px 0 24px;
border:1px solid var(--lenif-line);
background:var(--lenif-white);
}
.showroom-img{
aspect-ratio:16/9;background:var(--lenif-bg-soft);
display:flex;align-items:center;justify-content:center;
border-bottom:1px solid var(--lenif-line);
font-size:11px;letter-spacing:0.18em;color:var(--lenif-meta);
font-weight:700;
}
.showroom-body{padding:20px 18px 22px}
.showroom-meta{
margin:14px 0 18px;border-top:1px solid var(--lenif-line);
}
.showroom-meta .row{
display:flex;gap:14px;padding:10px 0;
border-bottom:1px solid var(--lenif-line);font-size:13px;
}
.showroom-meta .row .k{
flex:0 0 48px;color:var(--lenif-meta);font-weight:700;
font-size:11px;letter-spacing:0.06em;line-height:1.7;
}
.showroom-meta .row .v{color:var(--lenif-black);line-height:1.55}
.showroom-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.showroom-cta .btn{padding:13px 8px;font-size:13px}
/* 체험관 2개 운영 — wrapper + intro + 2 cards */
.showrooms{margin:48px 0 24px}
.showrooms-intro{margin-bottom:18px}
.showrooms-intro .lbl-sm{margin-bottom:6px}
.showrooms-intro .h-card{margin-bottom:10px}
.showrooms-intro .body-p{margin-bottom:0}
.showrooms .showroom{margin:14px 0 0}
.showrooms .showroom:first-of-type{margin-top:0}
/* NEW · 오픈 예정 배지 */
.showroom-badge{
display:inline-flex;align-items:center;gap:6px;
background:var(--lenif-orange);color:var(--lenif-white);
padding:5px 10px;font-size:10px;font-weight:700;
letter-spacing:0.12em;text-transform:uppercase;
margin-bottom:10px;border-radius:2px;
}
.showroom-badge.is-partner{background:var(--lenif-black)}
.showroom-tag{
font-size:11px;color:var(--lenif-meta);letter-spacing:0.06em;
margin:0 0 6px;font-weight:700;
}
/* ============================================================
PLACEHOLDER — 이미지가 들어갈 자리 (외주 후 ![]()
로 교체)
============================================================ */
/* 로딩 스켈레톤 — 개발자 텍스트/점선 제거, 은은한 중립 박스 (이미지 로드 시 매끄럽게 교체) */
.ph{
background:var(--lenif-bg-soft);
display:flex;align-items:center;justify-content:center;
position:relative;
overflow:hidden;
}
.ph::after{
/* 부드러운 shimmer */
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
transform:translateX(-100%);
animation:ph-shimmer 1.4s ease-in-out infinite;
}
@keyframes ph-shimmer{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .ph::after{ animation:none; } }
/* JS 로더가 textContent 로 읽어야 하므로 DOM 유지 + 시각적으로만 숨김
(변형 셀렉터 font-size override 무력화 위해 !important) */
.ph .ph-name,
.ph .ph-size,
.ph .ph-hint{
position:absolute !important;width:1px !important;height:1px !important;
overflow:hidden !important;clip:rect(0 0 0 0) !important;
white-space:nowrap;color:transparent !important;font-size:0 !important;
padding:0 !important;margin:0 !important;
}
/* placeholder ratio variants */
.ph-4-5{aspect-ratio:4/5}
.ph-4-3{aspect-ratio:4/3}
.ph-16-9{aspect-ratio:16/9}
.ph-1-1{aspect-ratio:1/1}
.ph-thumb{aspect-ratio:88/108}
/* 인증 badge — BIFMA 등 trust signal (제품별 선택 적용) */
.cert-badge{
margin:0 0 28px;
padding:18px 18px 16px;
background:var(--lenif-orange-bg);
border:1px solid var(--lenif-orange);
}
.cert-badge .cert-lbl{
font-size:10px;letter-spacing:0.18em;
color:var(--lenif-orange);font-weight:700;
margin:0 0 8px;text-transform:uppercase;
}
.cert-badge .cert-title{
font-size:15px;font-weight:700;color:var(--lenif-black);
margin:0 0 8px;line-height:1.45;letter-spacing:-0.005em;
}
.cert-badge .cert-detail{
font-size:12px;color:var(--lenif-body);
margin:0;line-height:1.65;
}
/* BIFMA 시험 항목 expandable details */
.cert-badge .cert-tests{
margin-top:12px;padding-top:12px;
border-top:1px solid rgba(242,135,75,0.25);
}
.cert-badge .cert-tests summary{
cursor:pointer;list-style:none;
font-size:12px;font-weight:700;color:var(--lenif-orange);
letter-spacing:0.01em;padding:2px 0;
user-select:none;
}
.cert-badge .cert-tests summary::-webkit-details-marker{display:none}
.cert-badge .cert-tests[open] summary{margin-bottom:10px}
.cert-badge .cert-test-list{
list-style:none;padding:0;margin:0 0 10px;
display:flex;flex-direction:column;gap:8px;
}
.cert-badge .cert-test-list li{
font-size:12px;color:var(--lenif-body);line-height:1.6;
padding-left:14px;position:relative;
}
.cert-badge .cert-test-list li::before{
content:"·";color:var(--lenif-orange);font-weight:700;
position:absolute;left:4px;top:-1px;font-size:14px;
}
.cert-badge .cert-test-list li strong{color:var(--lenif-black)}
.cert-badge .cert-test-note{
font-size:11px;color:var(--lenif-meta);
margin:0;line-height:1.6;
padding-top:8px;border-top:1px dashed rgba(0,0,0,0.08);
}
/* 환경 메타 (lead 다음 인라인) */
/* 시리즈 라인 — 인간공학 설계 pedigree 를 과하지 않게 인지 */
.pd-series{
font-size:12px;color:var(--lenif-meta);
margin:-18px 0 14px;letter-spacing:0.01em;line-height:1.5;
}
.pd-series strong{color:var(--lenif-orange);font-weight:700}
.pd-env-meta{
font-size:12px;color:var(--lenif-meta);
margin:0 0 28px;letter-spacing:0.02em;line-height:1.6;
}
/* 사용 사례 사진 갤러리 (1-3장 stack) */
.use-cases{
display:flex;flex-direction:column;gap:18px;
margin:0 0 28px;
}
.use-cases .uc-item{display:flex;flex-direction:column;gap:6px}
.use-cases .uc-caption{
font-size:12px;color:var(--lenif-meta);
margin:0;line-height:1.55;letter-spacing:0.01em;
}
.use-cases .uc-caption .showroom-tag{
display:inline-block;background:var(--lenif-orange);color:var(--lenif-white);
font-size:10px;font-weight:700;letter-spacing:0.1em;
padding:2px 6px;margin-right:6px;border-radius:2px;
vertical-align:middle;text-transform:uppercase;
}
.use-cases .uc-caption strong{color:var(--lenif-black);font-weight:700}
/* 핵심 사양 — 무게 단일 stat (SIZE 는 도면이 대체) */
.spec-weight{
display:flex;align-items:baseline;gap:var(--sp-3);
padding:var(--sp-3) 0;
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
margin:0 0 var(--sp-7);
}
.spec-weight .l{
font-size:var(--fs-xs);letter-spacing:0.14em;
color:var(--lenif-orange);font-weight:700;
}
.spec-weight .v{
font-size:var(--fs-lg);font-weight:700;color:var(--lenif-black);
}
/* 인체공학 요약 — 1줄 */
.ergo-summary{
font-size:14px;color:var(--lenif-body);
margin:0 0 28px;line-height:1.7;
padding:14px 16px;background:var(--lenif-orange-bg);
border-left:2px solid var(--lenif-orange);
}
/* 실사용 인용 카드 */
.real-review{
margin:0 0 28px;padding:18px 0;
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
}
.real-review .quote{
font-size:17px;font-weight:700;color:var(--lenif-black);
margin:0 0 10px;line-height:1.5;letter-spacing:-0.01em;
}
.real-review .source{
font-size:12px;color:var(--lenif-meta);
margin:0;line-height:1.55;
}
/* 제품 상세 액션 버튼 묶음 — 다음 섹션(DRAWING/구매채널)과 충분한 간격 */
/* 본문 인라인 CTA 블록 — 하단 고정바가 동일 액션을 상시 제공하므로 본문에선 숨김.
DOM 은 유지: 고정바 3버튼이 이 버튼들에 프록시(click)·라벨 미러링하므로 삭제 금지. */
.pd-actions{display:none !important}
/* 펼침 details — 인체공학·도면 상세 */
.pd-more{
margin:32px 0 0;
border-top:1px solid var(--lenif-line);
}
.pd-more summary{
cursor:pointer;list-style:none;
padding:16px 0;font-size:13px;font-weight:700;
color:var(--lenif-meta);letter-spacing:0.04em;
display:flex;justify-content:space-between;align-items:center;
}
.pd-more summary::-webkit-details-marker{display:none}
.pd-more[open] summary{color:var(--lenif-black)}
.pd-more-body{padding:0 0 20px}
.pd-more-body .lbl-sm{margin-top:0}
.ergo-list{
list-style:none;padding:0;margin:8px 0 0;
font-size:13px;color:var(--lenif-body);line-height:1.7;
}
.ergo-list li{
padding:8px 0;border-bottom:1px dashed var(--lenif-line);
}
.ergo-list li:last-child{border-bottom:none}
.ergo-list li strong{color:var(--lenif-black);font-weight:700}
/* B2C 외부 채널 (공식몰 / 네이버 스마트스토어) */
.ext-shops-wrap{
margin-top:28px;padding-top:20px;
border-top:1px solid var(--lenif-line);
}
.ext-shops-lbl{
font-size:11px;letter-spacing:0.14em;
color:var(--lenif-meta);font-weight:700;
margin:0 0 10px;text-transform:uppercase;
}
.ext-shops{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.ext-shop{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:14px 8px;border:1px solid var(--lenif-line);
background:var(--lenif-white);text-decoration:none;
transition:border-color .12s, background .12s;
}
.ext-shop:hover{
border-color:var(--lenif-black);
background:var(--lenif-orange-bg);
}
.ext-shop .name{
font-size:12px;font-weight:700;color:var(--lenif-black);
letter-spacing:-0.005em;text-align:center;
}
.ext-shop .act{
font-size:10px;color:var(--lenif-orange);
letter-spacing:0.06em;font-weight:700;
}
/* 카탈로그로 돌아가기 버튼 */
.pd-back-btn{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:700;color:var(--lenif-meta);
text-decoration:none;margin:8px 0 18px;
padding:8px 0;letter-spacing:-0.005em;
}
.pd-back-btn:hover{color:var(--lenif-black)}
/* ---------- Product detail ---------- */
.pd-back{
font-size:13px;color:var(--lenif-meta);
text-decoration:none;display:inline-block;
margin:0 0 18px;
}
.pd-name{
font-size:32px;font-weight:700;letter-spacing:-0.025em;
line-height:1.15;color:var(--lenif-black);
}
.pd-name-en{
font-size:12px;letter-spacing:0.2em;
color:var(--lenif-meta);margin-top:8px;font-weight:400;
}
.pd-hero{
margin:24px -24px;aspect-ratio:4/5;
background:var(--lenif-bg-soft);
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
display:flex;align-items:center;justify-content:center;
font-size:10px;letter-spacing:0.2em;color:var(--lenif-meta);
font-weight:700;
}
.colors{display:flex;gap:10px;margin:0 0 24px;flex-wrap:wrap}
.color-chip{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;color:var(--lenif-body);
padding:8px 14px 8px 8px;
border:1px solid var(--lenif-line);
background:var(--lenif-white);
font-family:inherit;
cursor:pointer;
transition:border-color .15s, background .15s, color .15s;
}
.color-chip:hover{border-color:var(--lenif-black)}
.color-chip:active{transform:scale(0.97)}
/* 활성 색상 — orange 강조 (현재 갤러리 슬라이드 색상과 sync) */
.color-chip.is-active{
border-color:var(--lenif-orange);
background:var(--lenif-orange-bg);
color:var(--lenif-black);
font-weight:700;
}
.color-chip:focus{outline:none}
.color-chip:focus-visible{outline:2px solid var(--lenif-orange);outline-offset:2px}
.color-chip .dot{width:18px;height:18px;border-radius:50%;border:1px solid var(--lenif-line)}
.color-chip.bk .dot{background:var(--lenif-black);border-color:var(--lenif-black)}
.color-chip.wh .dot{background:#F0EEE8}
.color-chip.gy .dot{background:#A39E91}
.pd-lead{
font-size:20px;font-weight:700;
letter-spacing:-0.015em;line-height:1.4;
color:var(--lenif-black);margin:0 0 32px;
}
.pd-lead em{font-style:normal;color:var(--lenif-orange)}
/* 가격 H3 옆 작은 메타 (수도권 일반기업 기준) */
.price-h-meta{
font-size:11px;font-weight:400;color:var(--lenif-meta);
letter-spacing:0.02em;margin-left:4px;
}
/* Price ladder — Step Connector variant with right-aligned amount */
.price-step{border-top:1px solid var(--lenif-line);margin:0 0 12px}
.price-step .row{
display:flex;align-items:baseline;
padding:18px 0;
border-bottom:1px solid var(--lenif-line);
}
.price-step .row .q{
width:56px;flex-shrink:0;
font-size:15px;color:var(--lenif-orange);font-weight:700;
letter-spacing:0.04em;
}
.price-step .row .d{
flex:1;font-size:13px;color:var(--lenif-meta);line-height:1.55;
}
.price-step .row .a{
font-size:17px;font-weight:700;color:var(--lenif-black);
font-feature-settings:"tnum";letter-spacing:-0.01em;
text-align:right;flex-shrink:0;margin-left:12px;
}
.price-step .row .a small{
display:inline-block;
font-size:10px;font-weight:700;color:var(--lenif-orange);
margin-left:4px;letter-spacing:0.06em;
}
/* 60+ 출시 기념 행 — 프리미엄 강조 (아이콘 없음) */
.price-step .row.is-promo{border-bottom-color:var(--lenif-orange)}
.price-step .row.is-promo .q{color:var(--lenif-black)}
.price-step .row.is-promo .d{
color:var(--lenif-orange);font-weight:800;letter-spacing:0.04em;
}
.price-step .row.is-promo .a{color:var(--lenif-orange)}
/* 신제품 출시 기념 프로모션 — 미니멀 에디토리얼 콜아웃 (아이콘 X) */
.pd-launch-promo{
margin:18px 0 0;padding:16px 18px;
background:var(--lenif-orange-bg);
border-left:2px solid var(--lenif-orange);
}
.pd-launch-promo .plp-tag{
display:block;font-size:10px;font-weight:800;
color:var(--lenif-orange);letter-spacing:0.18em;
text-transform:uppercase;margin-bottom:7px;
}
.pd-launch-promo .plp-body{
font-size:13px;color:var(--lenif-black);line-height:1.65;margin:0;
}
.pd-launch-promo .plp-body strong{font-weight:800;color:var(--lenif-black)}
.price-note{font-size:12px;color:var(--lenif-meta);margin:18px 0 32px;line-height:1.55}
/* Env tags — Inline List variant */
.env{margin:0 0 28px}
.env .tag{
display:inline-block;
font-size:13px;color:var(--lenif-body);
padding:7px 12px;margin:0 6px 6px 0;
border:1px solid var(--lenif-line);background:var(--lenif-white);
}
/* Ergonomics rows — Step Connector full variant */
.ergo .row{
display:flex;gap:14px;align-items:flex-start;
padding:22px 0;border-bottom:1px solid var(--lenif-line);
}
.ergo{border-top:1px solid var(--lenif-line);margin:0 0 28px}
.ergo .row .num{
width:48px;flex-shrink:0;font-size:18px;color:var(--lenif-orange);
font-weight:700;letter-spacing:0.04em;line-height:1.3;
}
.ergo .row .body{flex:1;min-width:0}
.ergo .row .body .t{
font-size:16px;font-weight:700;color:var(--lenif-black);
margin:0 0 8px;line-height:1.4;
}
.ergo .row .body .d{
font-size:14px;line-height:1.75;color:var(--lenif-body);
margin:0;
}
/* Drawing placeholder (로딩 전 박스에만 2:1 — img 교체 시엔 미적용) */
.dwg.ph{
aspect-ratio:2/1;
display:flex;align-items:center;justify-content:center;
font-size:10px;letter-spacing:0.2em;color:var(--lenif-meta);
font-weight:700;margin:0 0 22px;
}
/* Tier table for pricing policy section */
.ptab{
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
margin:0 0 12px;
}
.ptab .r{
display:grid;grid-template-columns:auto 1fr auto;
gap:14px;padding:14px 0;align-items:baseline;
border-bottom:1px solid var(--lenif-line);
font-size:14px;
}
.ptab .r:last-child{border-bottom:none}
.ptab .r .q{font-weight:700;color:var(--lenif-black);min-width:56px}
.ptab .r .t{color:var(--lenif-meta);font-size:13px}
.ptab .r .p{font-weight:700;color:var(--lenif-orange);font-feature-settings:"tnum"}
.ptab .r.head .q,.ptab .r.head .t,.ptab .r.head .p{
font-size:11px;letter-spacing:0.14em;color:var(--lenif-meta);
font-weight:700;text-transform:uppercase;
}
.ptab .r.head .p{color:var(--lenif-meta)}
/* Process step indicator */
.proc{
display:flex;justify-content:space-between;align-items:flex-start;
margin:24px 0 8px;position:relative;
}
.proc::before{
content:"";position:absolute;left:18px;right:18px;top:18px;
height:1px;background:var(--lenif-line);
}
.proc .s{position:relative;text-align:center;flex:1}
.proc .s .dot{
width:36px;height:36px;border-radius:50%;
border:1.5px solid var(--lenif-orange);
background:var(--lenif-white);
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;color:var(--lenif-orange);
margin:0 auto;position:relative;z-index:2;
letter-spacing:-0.02em;
}
.proc .s .l{
font-size:11px;color:var(--lenif-body);
margin-top:8px;line-height:1.4;font-weight:700;
}
/* Terms accordion — 통합 [05] 거래 조건 */
.terms-accordion{
border-top:1px solid var(--lenif-line);
margin:8px 0 0;
}
.terms-accordion > details{
border-bottom:1px solid var(--lenif-line);
}
.terms-accordion > details > summary{
cursor:pointer;list-style:none;
padding:18px 0;display:flex;align-items:center;gap:12px;
font-size:16px;font-weight:700;color:var(--lenif-black);
letter-spacing:-0.01em;
}
.terms-accordion > details > summary::-webkit-details-marker{display:none}
.terms-accordion > details > summary::after{
content:"+";margin-left:auto;font-size:22px;
color:var(--lenif-orange);font-weight:400;line-height:1;
}
.terms-accordion > details[open] > summary::after{content:"−"}
.terms-accordion > details > summary .lbl-sm{
display:inline-block;margin:0;font-size:10px;
background:var(--lenif-orange-bg);color:var(--lenif-orange);
padding:3px 8px;letter-spacing:0.12em;
}
.terms-accordion > details > .ans{
padding:8px 0 24px;
font-size:14px;color:var(--lenif-body);line-height:1.7;
}
/* 중첩 FAQ details 안 details */
.terms-accordion .faq details{padding:14px 0}
.terms-accordion .faq details summary{font-size:14px;font-weight:600}
/* FAQ — Border-Bottom Stack via */
.faq{margin:24px 0 0;border-top:1px solid var(--lenif-line)}
.faq details{
padding:18px 0;
border-bottom:1px solid var(--lenif-line);
}
.faq summary{
cursor:pointer;list-style:none;
font-size:15px;font-weight:700;color:var(--lenif-black);
line-height:1.5;
display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+";font-size:20px;color:var(--lenif-orange);
font-weight:400;line-height:1;flex-shrink:0;
}
.faq details[open] summary::after{content:"−"}
.faq .ans{
font-size:14px;color:var(--lenif-body);
margin:12px 0 0;line-height:1.75;
}
/* Quote form */
.form{display:flex;flex-direction:column;gap:14px;margin:0 0 16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
font-size:11px;letter-spacing:0.14em;
color:var(--lenif-orange);font-weight:700;
}
.field input, .field select, .field textarea{
width:100%;
border:1px solid var(--lenif-line);
background:var(--lenif-white);
padding:13px 14px;font:inherit;font-size:15px;
color:var(--lenif-black);outline:none;border-radius:0;
transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
border-color:var(--lenif-black);
}
.field .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-foot{
font-size:12px;color:var(--lenif-meta);
text-align:center;line-height:1.7;
}
.channels{margin:24px 0 0;border-top:1px solid var(--lenif-line)}
.channels .ch{
display:flex;justify-content:space-between;align-items:center;
padding:18px 0;border-bottom:1px solid var(--lenif-line);
text-decoration:none;font-size:14px;color:var(--lenif-black);
}
.channels .ch .l{font-weight:700;letter-spacing:-0.01em}
.channels .ch .r{color:var(--lenif-meta);font-size:13px;font-feature-settings:"tnum"}
/* ---------- Floating CTA — 모바일 화면 항상 하단 ---------- */
.sticky-cta{
position:fixed;left:0;right:0;bottom:0;
padding:12px 16px calc(14px + env(safe-area-inset-bottom));
background:var(--lenif-white);
border-top:1px solid var(--lenif-line);
z-index:25;
box-shadow:0 -4px 16px rgba(0,0,0,.06);
transition:transform .22s ease;
}
.sticky-cta .btn{
width:100%;padding:16px 14px;font-size:15px;font-weight:700;
letter-spacing:-0.01em;border-radius:2px;
}
/* hide-on-receipt 클래스가 phone에 붙으면 sticky-cta 숨김 */
.phone.hide-cta .sticky-cta{transform:translateY(110%)}
/* 제품 상세 모드: 고정바 = 그 제품 전용 3버튼 (담기 full + 샘플·체험관 2칸) */
.sticky-cta .sticky-default[hidden],
.sticky-cta .sticky-product[hidden]{display:none}
.sticky-cta .sticky-product{
display:flex;flex-direction:column;gap:8px;
}
/* 고정바는 높이 제약 → 인라인 본문보다 컴팩트하게 (3개 다 넣되 안 빽빽) */
.sticky-cta .sticky-product .btn-primary{
padding:13px 14px;font-size:15px;
}
.sticky-cta .sticky-product .try-row{gap:8px;margin:0}
.sticky-cta .sticky-product .try-row .btn{
padding:10px 8px;font-size:12.5px;width:100%;
}
/* 데스크탑에서도 phone width 390 안에 fit
— transform 대신 margin-left 로 중앙 정렬 (resting 상태 transform 없음
→ iOS 스크롤 reflow 시 transition:transform 미트리거, 흔들림 해소) */
@media (min-width:431px){
.sticky-cta{
position:fixed;
left:50%;margin-left:calc(var(--frame-half) * -1);
right:auto;width:var(--frame-w);
}
}
/* ---------- [10] PARTNER CONTACT — 견적 전화 CTA ---------- */
.contact-call-btn{
display:flex;align-items:center;justify-content:center;
gap:10px;
font-size:16px;font-weight:700;
padding:18px 14px;
letter-spacing:-0.005em;
background:var(--lenif-black);color:var(--lenif-white);
text-decoration:none;
border-radius:2px;
transition:opacity .12s;
}
.contact-call-btn:active{opacity:.85}
.contact-call-btn .call-icon{
font-size:18px;line-height:1;
transform:translateY(-1px);
}
.contact-call-btn .call-num{
font-size:17px;font-weight:700;letter-spacing:0.01em;
font-feature-settings:"tnum";
}
.contact-call-btn .call-label{
display:none;
}
@media (min-width:380px){
.contact-call-btn .call-label{
display:inline;font-size:13px;font-weight:400;opacity:0.75;
margin-left:4px;
}
}
.contact-call-meta{
text-align:center;margin:10px 0 32px;
font-size:12px;color:var(--lenif-meta);
}
/* ---------- 제품 상세 갤러리 (multi-angle slider) ---------- */
.pd-gallery{
position:relative;
margin:24px -24px;
overflow:hidden;
background:var(--lenif-white);
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
aspect-ratio:4/5;
user-select:none;
/* 가로 스와이프는 JS 가 소유 · 세로 스크롤은 브라우저 허용 */
touch-action:pan-y;
}
.pd-gallery-track{
display:flex;
width:100%;height:100%;
transition:transform .35s cubic-bezier(.2,.8,.2,1);
will-change:transform;
touch-action:pan-y;
}
.pd-gallery-slide{
flex:0 0 100%;
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
background:var(--lenif-white);
}
.pd-gallery-slide img{
width:100%;height:100%;
object-fit:contain;
padding:24px 16px;
box-sizing:border-box;
display:block;
pointer-events:none;
}
/* 좌/우 화살표 — 항상 노출 (여러 사진 인지 시그널) */
.pd-gallery-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:38px;height:38px;
border-radius:50%;
border:1px solid var(--lenif-line);
background:rgba(255,255,255,.95);
cursor:pointer;
font-size:18px;font-weight:700;
color:var(--lenif-black);
line-height:1;
z-index:3;
display:flex;align-items:center;justify-content:center;
transition:opacity .15s, transform .1s, background .15s;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.pd-gallery-nav:hover{background:var(--lenif-white);border-color:var(--lenif-black)}
.pd-gallery-nav:active{transform:translateY(-50%) scale(0.92)}
.pd-gallery-nav.is-disabled{
opacity:0.25;cursor:not-allowed;
}
.pd-gallery-prev{left:12px}
.pd-gallery-next{right:12px}
/* 카운터 (1/4) — 우상단 */
.pd-gallery-counter{
position:absolute;
top:14px;right:14px;
background:rgba(0,0,0,.65);
color:var(--lenif-white);
font-size:11px;font-weight:700;
padding:5px 10px;
border-radius:11px;
letter-spacing:0.04em;
font-feature-settings:"tnum";
z-index:2;
backdrop-filter:blur(4px);
}
/* 하단 도트 indicator */
.pd-gallery-dots{
position:absolute;
bottom:16px;left:50%;
transform:translateX(-50%);
display:flex;gap:6px;
z-index:2;
padding:6px 12px;
background:rgba(255,255,255,.92);
border-radius:14px;
box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.pd-gallery-dot{
width:7px;height:7px;border-radius:50%;
background:rgba(0,0,0,.22);
cursor:pointer;
transition:background .2s, width .25s ease;
}
.pd-gallery-dot.is-active{
background:var(--lenif-orange);
width:20px;border-radius:4px;
}
/* placeholder fallback (이미지 없을 때) */
.pd-gallery.is-empty{
background:var(--lenif-bg-soft);
border:1px dashed var(--lenif-meta);
display:flex;align-items:center;justify-content:center;
text-align:center;padding:24px;
}
.pd-gallery.is-empty::before{
content:"PLACEHOLDER";
position:absolute;top:14px;left:14px;
font-size:9px;letter-spacing:0.18em;font-weight:700;
color:var(--lenif-orange);
background:var(--lenif-orange-bg);padding:3px 7px;
}
/* 단일 이미지 (slide 1개) — arrows + dots 숨김 */
.pd-gallery.is-single .pd-gallery-nav,
.pd-gallery.is-single .pd-gallery-dots,
.pd-gallery.is-single .pd-gallery-counter{display:none}
/* ---------- 옵션 선택 (폴드핏 프로 받침대/컵홀더 등) ---------- */
/* 제품 카드 내부 설정 블록 — 좌측 레일로 '이 제품의 옵션' 명시 */
.wz-options-block{
margin:12px 0 0;padding:12px 0 0 12px;
border-top:1px solid var(--lenif-line);
border-left:2px solid var(--lenif-line);
}
.wz-options-lbl{
font-size:10px;letter-spacing:0.12em;
color:var(--lenif-orange);font-weight:800;
margin:0 0 7px;text-transform:uppercase;
}
.wz-options-row{
display:flex;gap:6px;flex-wrap:wrap;
}
.wz-option{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;
padding:8px 12px 8px 8px;
border:none;border-radius:8px;
background:transparent;
box-shadow:inset 0 0 0 1px var(--lenif-line);
cursor:pointer;
transition:box-shadow .12s, background .12s;
flex:1 1 calc(50% - 4px);min-width:160px;
}
/* 옵션 미리보기 썸네일 — 클릭 시 갤러리 점프 */
.wz-option-thumb{
flex:0 0 44px;width:44px;height:54px;
background:var(--lenif-white);
border:none;border-radius:6px;
overflow:hidden;display:block;
cursor:zoom-in;
transition:transform .12s;
}
.wz-option-thumb:hover{
transform:scale(1.05);
}
.wz-option-thumb img{
width:100%;height:100%;
object-fit:cover;display:block;
}
.wz-option:hover{box-shadow:inset 0 0 0 1.5px var(--lenif-black)}
.wz-option input{position:absolute;opacity:0;width:0;height:0}
.wz-option .ck{
width:14px;height:14px;border-radius:4px;border:none;
background:transparent;box-shadow:inset 0 0 0 1.5px var(--lenif-line);
flex-shrink:0;position:relative;transition:all .15s;
}
.wz-option .ck::after{
content:"";position:absolute;left:3px;top:0px;
width:4px;height:8px;border:solid var(--lenif-white);
border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);
transition:transform .15s;
}
.wz-option .t{
flex:1;color:var(--lenif-body);font-weight:400;line-height:1.3;
}
.wz-option .p{
font-size:10px;color:var(--lenif-orange);font-weight:700;
font-feature-settings:"tnum";flex-shrink:0;
}
.wz-option.is-on{
background:var(--lenif-orange-bg);
box-shadow:inset 0 0 0 1.5px var(--lenif-orange);
}
.wz-option.is-on .ck{
background:var(--lenif-orange);box-shadow:none;
}
.wz-option.is-on .ck::after{transform:rotate(45deg) scale(1)}
.wz-option.is-on .t{color:var(--lenif-black);font-weight:700}
/* 라디오 옵션 (바퀴 구성 등 — 둘 중 하나 선택) */
.wz-radio-group{
margin:8px 0 0;padding:8px 0 0;
border-top:1px dashed var(--lenif-line);
}
.wz-radio-lbl{
font-size:10px;letter-spacing:0.08em;
color:var(--lenif-body);font-weight:700;
margin:0 0 6px;
}
.wz-radio-row{
display:flex;gap:6px;flex-wrap:wrap;
}
.wz-radio{
display:inline-flex;align-items:center;gap:6px;
font-size:11px;
padding:8px 12px;
border:none;border-radius:8px;
background:transparent;
box-shadow:inset 0 0 0 1px var(--lenif-line);
cursor:pointer;
transition:box-shadow .12s, background .12s;
flex:1 1 calc(50% - 4px);min-width:140px;
position:relative;
}
.wz-radio:hover{box-shadow:inset 0 0 0 1.5px var(--lenif-black)}
.wz-radio input{position:absolute;opacity:0;width:0;height:0}
.wz-radio .dot{
width:14px;height:14px;border-radius:50%;
border:none;background:transparent;
box-shadow:inset 0 0 0 1.5px var(--lenif-line);
flex-shrink:0;position:relative;transition:all .15s;
}
.wz-radio .dot::after{
content:"";position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
width:6px;height:6px;border-radius:50%;
background:var(--lenif-white);
transition:transform .15s;
}
.wz-radio .t{
flex:1;color:var(--lenif-body);font-weight:400;line-height:1.3;
}
.wz-radio .p{
font-size:10px;color:var(--lenif-orange);font-weight:700;
font-feature-settings:"tnum";flex-shrink:0;
}
.wz-radio.is-on{
background:var(--lenif-orange-bg);
box-shadow:inset 0 0 0 1.5px var(--lenif-orange);
}
.wz-radio.is-on .dot{
box-shadow:inset 0 0 0 1.5px var(--lenif-orange);background:var(--lenif-orange);
}
.wz-radio.is-on .dot::after{transform:translate(-50%,-50%) scale(1)}
.wz-radio.is-on .t{color:var(--lenif-black);font-weight:700}
/* ---------- 예약 주문 배지 (폴드핏 프로 등) ---------- */
/* 예약 주문 배지 — 아이콘 없는 미니멀 에디토리얼 (프리미엄 톤) */
.pre-order-badge{
display:inline-flex;align-items:center;
background:transparent;color:var(--lenif-orange);
font-size:10px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
padding:4px 0;border:none;
line-height:1;
}
.pre-order-badge::after{
content:"";display:inline-block;width:18px;height:1px;
background:var(--lenif-orange);margin-left:9px;vertical-align:middle;
}
/* 매트릭스 카드 — preorder 배지 위치 */
.pcard .pre-order-badge{margin:0 0 10px}
/* 제품 상세 HERO 위 prominent banner */
.pd-preorder-banner{
display:flex;align-items:center;gap:10px;
background:var(--lenif-orange-bg);
border:1px solid var(--lenif-orange);
padding:12px 14px;margin:18px 0 0;
font-size:13px;color:var(--lenif-black);
line-height:1.55;
}
.pd-preorder-banner .pre-order-badge{flex-shrink:0}
.pd-preorder-banner .pre-order-text{flex:1}
.pd-preorder-banner .pre-order-text strong{color:var(--lenif-orange);font-weight:700}
/* Wizard product tile — preorder */
/* is-preorder 배경 강조 제거 — 다른 제품 타일과 동일 (사용자 요청 2026-05-17) */
.wz-product-tile .preorder-mini{
font-size:9px;font-weight:700;color:var(--lenif-meta);
letter-spacing:0.1em;margin-top:2px;text-transform:uppercase;
}
/* 카트 row 안 preorder 한 줄 */
.wz-cart-row .preorder-line{
font-size:10px;color:var(--lenif-meta);font-weight:700;
letter-spacing:0.08em;margin-top:3px;
}
/* ---------- Smart Loader 가 생성한 img 의 컨텍스트별 표시 룰 ---------- */
img.asset-img{display:block;max-width:100%;height:auto}
/* Matrix card 썸네일 — 가로 배치 좌측 큰 이미지, 보더리스 (cutout 전체 contain) */
.pcard .pthumb img.thumb.asset-img{
width:100%;height:100%;
object-fit:contain;
display:block;
}
/* 제품 상세 HERO (4:5 풀-와이드 — 좌우 24px padding 보정) */
img.pd-hero.asset-img{
width:calc(100% + 48px);
max-width:calc(100% + 48px);
margin:24px -24px;
aspect-ratio:4/5;object-fit:contain;
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
background:var(--lenif-bg-soft);
}
/* 사용 사례 (4:3) */
.use-cases img.asset-img{
width:100%;aspect-ratio:4/3;object-fit:cover;
border:1px solid var(--lenif-line);
}
/* 도면 — 원본 비율 그대로 보더리스 (aspect-ratio 강제 해제, 왜곡 방지) */
img.dwg.asset-img{
width:100%;height:auto;display:block;
aspect-ratio:auto;object-fit:contain;
margin:0 0 22px;
cursor:zoom-in;
}
/* ---------- 도면 확대 라이트박스 (탭 → 풀스크린, 원본 해상도 패닝) ---------- */
.lbl-zoom{
margin-left:8px;font-size:10px;letter-spacing:.08em;
color:var(--lenif-meta);font-weight:600;
}
.lbl-zoom::before{content:"⤢ "}
.dwg-lb[hidden]{display:none}
.dwg-lb{
position:fixed;inset:0;z-index:120;
display:flex;align-items:center;justify-content:center;
}
.dwg-lb-backdrop{
position:absolute;inset:0;
background:rgba(16,15,14,.92);
animation:dwg-lb-fade .2s ease both;
}
.dwg-lb-scroll{
position:relative;width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
-webkit-overflow-scrolling:touch;
touch-action:pinch-zoom;
}
.dwg-lb-img{
max-width:100%;max-height:100%;
width:auto;height:auto;display:block;
object-fit:contain;cursor:zoom-in;
animation:dwg-lb-pop .22s cubic-bezier(.22,1,.36,1) both;
user-select:none;-webkit-user-select:none;
-webkit-touch-callout:none;
}
.dwg-lb.is-zoomed .dwg-lb-scroll{
overflow:auto;
align-items:flex-start;justify-content:flex-start;
touch-action:pan-x pan-y pinch-zoom;
}
.dwg-lb.is-zoomed .dwg-lb-img{
max-width:none;max-height:none;
width:auto;height:auto;cursor:zoom-out;
margin:auto;
}
.dwg-lb-close{
position:absolute;top:calc(10px + env(safe-area-inset-top));right:14px;
width:40px;height:40px;border-radius:var(--radius-pill);
border:none;background:rgba(255,255,255,.14);
color:#fff;font-size:18px;line-height:1;font-weight:700;
display:flex;align-items:center;justify-content:center;
cursor:pointer;-webkit-tap-highlight-color:transparent;
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.dwg-lb-close:active{background:rgba(255,255,255,.26)}
.dwg-lb-hint{
position:absolute;left:50%;transform:translateX(-50%);
bottom:calc(16px + env(safe-area-inset-bottom));
font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.72);
background:rgba(0,0,0,.34);padding:6px 14px;border-radius:var(--radius-pill);
pointer-events:none;white-space:nowrap;
animation:dwg-lb-fade .3s ease both;
}
.dwg-lb.is-zoomed .dwg-lb-hint{display:none}
@keyframes dwg-lb-fade{from{opacity:0}to{opacity:1}}
@keyframes dwg-lb-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.dwg-lb-backdrop,.dwg-lb-img,.dwg-lb-hint{animation:none}
}
body.dwg-lb-lock{overflow:hidden}
/* 체험관 (16:9) */
img.showroom-img.asset-img{
width:100%;aspect-ratio:16/9;object-fit:cover;
border-bottom:1px solid var(--lenif-line);
}
/* Cover hero (.cover 직속 img — 1:1) */
.cover > img.asset-img{
width:100%;aspect-ratio:1/1;object-fit:cover;
background:var(--lenif-white);
}
/* Wizard 카트 row 썸네일 (44×54) — 작은 size */
.wz-cart-thumb.asset-img{
flex:0 0 44px;width:44px;height:54px;
object-fit:cover;
border:1px solid var(--lenif-line);
}
/* Wizard 추천 카드 썸네일 (56×68) */
.wz-rec-thumb.asset-img{
flex:0 0 56px;width:56px;height:68px;
object-fit:cover;
border:1px solid var(--lenif-line);
}
/* Wizard 직접 선택 그리드 썸네일 (4:5 비율) */
.wz-product-tile .thumb.asset-img{
width:100%;aspect-ratio:4/5;object-fit:cover;
border:1px solid var(--lenif-line);background:var(--lenif-white);
}
/* ---------- Footer ---------- */
footer{
padding:40px 24px 32px;
border-top:1px solid var(--lenif-line);
text-align:center;
}
footer .wm{
font-size:14px;font-weight:700;letter-spacing:0.2em;
color:var(--lenif-black);margin-bottom:14px;display:block;
}
footer .info{
font-size:12px;color:var(--lenif-meta);line-height:1.75;
}
/* ---------- Desktop helper ---------- */
.helper{
position:fixed;top:16px;left:16px;
max-width:260px;background:var(--lenif-white);
border:1px solid var(--lenif-line);
padding:18px 18px 16px;font-size:12px;
line-height:1.7;color:var(--lenif-body);
box-shadow:0 8px 24px rgba(0,0,0,.08);
z-index:100;
}
.helper .lbl-sm{margin-bottom:8px}
.helper p{margin-bottom:4px}
.helper .close{
position:absolute;top:6px;right:8px;cursor:pointer;
color:var(--lenif-meta);font-size:18px;background:none;border:none;line-height:1;
}
@media (max-width:900px){.helper{display:none}}
/* ---------- Quote Wizard ---------- */
.wz-stepper{
display:flex;justify-content:space-between;align-items:center;
margin:8px 0 28px;position:relative;
}
.wz-stepper::before{
content:"";position:absolute;left:18px;right:18px;top:18px;
height:1px;background:var(--lenif-line);z-index:1;
}
.wz-step{
position:relative;z-index:2;display:flex;flex-direction:column;
align-items:center;flex:1;text-align:center;
}
.wz-step .n{
width:36px;height:36px;border-radius:50%;
border:none;background:var(--lenif-bg-soft);
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;color:var(--lenif-meta);
transition:all .2s;
}
.wz-step .t{font-size:10px;color:var(--lenif-meta);margin-top:6px;letter-spacing:0.04em;font-weight:700}
.wz-step.is-active .n{
background:var(--lenif-orange);color:var(--lenif-white);
}
.wz-step.is-active .t{color:var(--lenif-orange)}
.wz-step.is-done .n{
background:var(--lenif-black);color:var(--lenif-white);
}
.wz-step.is-done .t{color:var(--lenif-black)}
.wz-pane[hidden]{display:none}
/* Step 1 · checkboxes */
.wz-spaces{
display:flex;flex-direction:column;gap:0;margin:8px 0 28px;
border-top:1px solid var(--lenif-line);
}
.wz-check{
display:flex;align-items:center;gap:12px;padding:16px 4px;
border:none;border-radius:0;background:transparent;
border-bottom:1px solid var(--lenif-line);
cursor:pointer;transition:background .14s;
position:relative;
}
.wz-check input{position:absolute;opacity:0;width:0;height:0}
.wz-check .ck{
width:20px;height:20px;border-radius:6px;border:none;
background:transparent;box-shadow:inset 0 0 0 1.5px var(--lenif-line);
flex-shrink:0;position:relative;transition:all .15s;
}
.wz-check .ck::after{
content:"";position:absolute;left:5px;top:1px;
width:6px;height:11px;border:solid var(--lenif-white);
border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
transition:transform .15s;
}
.wz-check .t{
font-size:15px;font-weight:700;color:var(--lenif-black);
flex:1;letter-spacing:-0.01em;
}
.wz-check .m{font-size:11px;color:var(--lenif-meta);letter-spacing:0.02em}
.wz-check:last-child{border-bottom:none}
.wz-check:hover{background:rgba(0,0,0,.015)}
.wz-check.is-on{background:var(--lenif-orange-bg)}
.wz-check.is-on .t{color:var(--lenif-orange)}
.wz-check.is-on .ck{background:var(--lenif-orange);box-shadow:none}
.wz-check.is-on .ck::after{transform:rotate(45deg) scale(1)}
/* Step 1 · 다음 버튼 하단 플로팅 */
.phone.mode-quote .wz-pane[data-pane="1"]{
padding-bottom:92px;
}
.phone.mode-quote .wz-pane[data-pane="1"] .wz-next-float{
position:fixed;
left:16px;
right:16px;
bottom:calc(12px + env(safe-area-inset-bottom));
width:calc(100vw - 32px);
margin:0;
padding:16px 14px;
box-shadow:0 -4px 16px rgba(0,0,0,.06);
z-index:26;
}
.phone.mode-quote .wz-pane[data-pane="1"] .wz-next-float.btn{
font-size:15px;
font-weight:700;
}
@media (min-width:431px){
.phone.mode-quote .wz-pane[data-pane="1"] .wz-next-float{
left:50%;
margin-left:calc(var(--frame-half) * -1);
right:auto;
width:calc(var(--frame-w) - 32px);
}
}
/* Step 2 · 권역 + 공공 옵션 (V3 입력) */
.wz-region{
margin:20px 0 8px;
padding:18px 0;
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
}
.wz-region .lbl-sm{margin:0 0 8px}
.wz-region-title{
margin:0 0 14px;
font-size:15px;
font-weight:700;
color:var(--lenif-black);
letter-spacing:-0.015em;line-height:1.4;
}
.wz-region-help{
margin:0 0 10px;
font-size:11px;
color:var(--lenif-meta);
line-height:1.55;
}
.wz-region-row{
display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
margin:0 0 4px;
}
.wz-region-field{display:flex;flex-direction:column;gap:4px}
.wz-region-field label{
font-size:10px;letter-spacing:0.14em;
color:var(--lenif-black);font-weight:700;
}
.wz-region-field select{
border:none;border-bottom:1.5px solid var(--lenif-line);
background:transparent;
padding:8px 2px;font:inherit;font-size:14px;font-weight:700;color:var(--lenif-black);
outline:none;border-radius:0;
transition:border-color .15s;
}
.wz-region-field select:focus-visible{border-bottom-color:var(--lenif-orange);outline:none}
.wz-public-toggle{
display:flex;align-items:center;gap:8px;
padding:9px 0;border:none;border-radius:0;
background:transparent;cursor:pointer;
font-size:13px;color:var(--lenif-body);
align-self:flex-end;
}
.wz-public-toggle input{position:absolute;opacity:0;width:0;height:0}
.wz-public-toggle .ck{
width:16px;height:16px;border-radius:5px;border:none;
box-shadow:inset 0 0 0 1.5px var(--lenif-line);
flex-shrink:0;position:relative;transition:all .15s;
}
.wz-public-toggle .ck::after{
content:"";position:absolute;left:4px;top:0px;
width:4px;height:9px;border:solid var(--lenif-white);
border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
transition:transform .15s;
}
.wz-public-toggle input:checked + .ck{
background:var(--lenif-orange);box-shadow:none;
}
.wz-public-toggle input:checked + .ck::after{transform:rotate(45deg) scale(1)}
.wz-public-toggle input:checked ~ .t{color:var(--lenif-black);font-weight:700}
.wz-region-note{
font-size:11px;color:var(--lenif-meta);
margin:0;line-height:1.55;
}
/* ABOUT 섹션 — 슬로건 */
.about-h-tagline{
font-size:32px;font-weight:700;line-height:1.3;
letter-spacing:-0.025em;color:var(--lenif-black);
margin:8px 0 36px;padding:0 0 28px;
border-bottom:1px solid var(--lenif-line);
}
/* ABOUT 섹션 — EXTERNAL VALIDATION 카드 list */
.about-validations{
margin:8px 0 0;
border-top:1px solid var(--lenif-line);
}
.vc-item{
display:flex;gap:14px;align-items:flex-start;
padding:18px 0;
border-bottom:1px solid var(--lenif-line);
}
.vc-chip{
flex:0 0 auto;
background:var(--lenif-orange-bg);
color:var(--lenif-orange);
font-size:10px;letter-spacing:0.16em;font-weight:700;
padding:6px 10px;text-align:center;
line-height:1.3;
align-self:flex-start;
}
.vc-body{flex:1;min-width:0}
.vc-title{
font-size:15px;font-weight:700;
color:var(--lenif-black);margin:0 0 4px;
line-height:1.4;letter-spacing:-0.005em;
}
.vc-detail{
font-size:13px;color:var(--lenif-meta);
margin:0;line-height:1.6;
}
/* Step 2 · recommendations */
.wz-rec-title{margin-top:4px}
.wz-rec-meta{margin:0 0 8px}
.wz-rec{display:flex;flex-direction:column;gap:0;margin:8px 0 0;
border-top:1px solid var(--lenif-line)}
.wz-rec-card{
display:flex;align-items:center;gap:12px;padding:14px 2px;
border:none;border-radius:0;background:transparent;
border-bottom:1px solid var(--lenif-line);
}
.wz-rec-card:last-child{border-bottom:none}
.wz-rec-card .info{flex:1;min-width:0}
.wz-rec-card .n{font-size:14px;font-weight:700;color:var(--lenif-black);margin:0 0 4px}
.wz-rec-card .d{font-size:11px;color:var(--lenif-meta);margin:0}
.wz-rec-card .btn{padding:9px 14px;font-size:12px;background:var(--lenif-white);flex-shrink:0}
.wz-rec-badge{
display:inline-block;
margin-right:7px;
padding:0;
font-size:10px;
font-weight:800;
letter-spacing:0.1em;
color:var(--lenif-orange);
background:transparent;
border:none;
vertical-align:middle;
}
.wz-rec-qty{
color:var(--lenif-black);
font-weight:700;
}
.wz-rec-thumb{
flex:0 0 56px;height:68px;background:var(--lenif-white);
border:1px solid var(--lenif-line);
border-radius:12px;overflow:hidden;
padding:4px;font-size:8px;
}
.wz-rec-thumb::before{font-size:7px;padding:1px 3px;letter-spacing:0.08em;top:2px;left:2px}
.wz-rec-thumb .ph-name{font-size:8px}
/* Step 2 · 5 카드 그리드 (직접 선택) */
.wz-product-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
margin:0 0 8px;
}
.wz-product-tile{
display:flex;flex-direction:column;align-items:stretch;gap:8px;
padding:8px 8px 12px;border:none;border-radius:14px;
background:transparent;cursor:pointer;
font-family:inherit;text-align:left;
transition:box-shadow .16s, transform .12s;
}
.wz-product-tile:hover{box-shadow:0 8px 22px rgba(26,26,26,.09);transform:translateY(-2px)}
.wz-product-tile:active{transform:scale(0.98)}
.wz-product-tile .thumb{
width:100%;height:auto;aspect-ratio:4/5;background:var(--lenif-white);
border:1px solid var(--lenif-line);
border-radius:14px;overflow:hidden;
padding:8px 4px;font-size:8px;
}
.wz-product-tile .thumb::before{
font-size:7px;letter-spacing:0.08em;padding:1px 3px;top:3px;left:3px;
}
.wz-product-tile .thumb .ph-name{font-size:9px}
.wz-product-tile .thumb .ph-size{display:none}
.wz-product-tile .n{
font-size:13px;font-weight:700;color:var(--lenif-black);
margin:0;line-height:1.3;letter-spacing:-0.01em;
}
.wz-product-tile .p{
font-size:12px;color:var(--lenif-orange);font-weight:800;
margin:0;font-feature-settings:"tnum";
}
.wz-product-tile .p small{color:var(--lenif-meta);font-size:10px;margin-left:2px;font-weight:400}
.wz-product-tile.is-discontinued{
opacity:0.4;cursor:not-allowed;
}
.wz-product-tile.is-discontinued .p{color:var(--lenif-meta)}
.wz-product-tile.is-discontinued:hover{
box-shadow:none;transform:none;
}
.wz-product-tile.is-discontinued .p{color:var(--lenif-meta)}
/* Step 2 · direct add */
.wz-add-row{display:flex;gap:6px;align-items:center;margin:8px 0 0}
.wz-add-row .wz-input{
flex:1;border:1px solid var(--lenif-line);background:var(--lenif-white);
padding:11px 12px;font:inherit;font-size:13px;outline:none;
}
.wz-add-row .wz-qty{flex:0 0 70px}
.wz-add-row .wz-add-btn{padding:11px 14px;font-size:13px;white-space:nowrap}
/* Step 2 · 하단 bottom-sheet 카트 패널 (toggle bar = 펼치기/접기 UI) */
.wz-cart-stick{
position:fixed;
left:0;right:0;bottom:0;
background:var(--lenif-white);
border-top:1px solid var(--lenif-line);
padding:0 16px calc(12px + env(safe-area-inset-bottom));
box-shadow:0 -8px 20px rgba(0,0,0,.06);
z-index:26;
max-height:62vh;
display:flex;flex-direction:column;
}
.wz-cart-stick.is-empty{padding-top:8px}
@media (min-width:431px){
.wz-cart-stick{
left:50%;right:auto;
transform:translateX(-50%);
width:var(--frame-w);
}
}
/* Toggle bar — 핸들 자리에 클릭 가능한 토글 (full-width tap target) */
.wz-toggle-bar{
display:flex;align-items:center;justify-content:center;gap:8px;
width:calc(100% + 32px); /* 좌·우 16px 패딩 보정 — 양쪽 끝까지 */
margin:0 -16px;
padding:16px 16px 12px;
background:var(--lenif-orange-bg);
border:none;
cursor:pointer;font-family:inherit;
font-size:13px;font-weight:800;
color:var(--lenif-orange);
letter-spacing:0.04em;
transition:background .15s, color .15s;
position:relative;
flex-shrink:0;
}
/* 작은 핸들 라인 (drawer 시각 신호) — 위에 오버레이 */
.wz-toggle-bar::before{
content:"";
position:absolute;
top:6px;left:50%;transform:translateX(-50%);
width:40px;height:3px;
background:var(--lenif-orange);opacity:0.45;
border-radius:2px;
}
.wz-toggle-bar:hover{
background:var(--lenif-orange);color:var(--lenif-white);
}
.wz-toggle-bar:hover::before{background:var(--lenif-white);opacity:0.7}
.wz-toggle-bar:active{opacity:0.85}
/* Header (count + total) — no longer the toggle */
.wz-cart-stick-head{
display:flex;align-items:center;justify-content:space-between;
padding:12px 0 12px;
flex-shrink:0;
}
.wz-cart-stick-head .head-left{
display:flex;align-items:baseline;gap:8px;
}
.wz-cart-stick-head .lbl-sm{margin:0}
.wz-cart-count{
font-size:12px;color:var(--lenif-meta);font-weight:700;
letter-spacing:0.02em;
}
.wz-cart-count.is-on{color:var(--lenif-black)}
.wz-cart-stick-head .head-right{
display:flex;align-items:center;gap:10px;
}
.wz-cart-quick-total{
font-size:16px;font-weight:700;color:var(--lenif-black);
font-feature-settings:"tnum";letter-spacing:-0.01em;
}
/* CSS-drawn chevron — toggle bar 안에서 회전 ⌃/⌄ (크기 ↑·두께 ↑ 가독성) */
.wz-cart-chevron{
display:inline-block;
width:11px;height:11px;
border-right:2.2px solid currentColor;
border-bottom:2.2px solid currentColor;
transform:rotate(-135deg); /* 기본 ⌃ — 펼치기 (위로 향함, 펼침 방향) */
transition:transform .25s ease;
margin-bottom:4px;
}
.wz-cart-stick:not(.is-collapsed) .wz-cart-chevron{
transform:rotate(45deg); /* 펼쳤을 때 ⌄ — 접기 (아래로 향함, 접힘 방향) */
margin-bottom:0;margin-top:-3px;
}
/* 펼치기/접기 텍스트 토글 (CSS only, 상태별 표시) */
.wz-cart-stick.is-collapsed .wz-text-collapse{display:none}
.wz-cart-stick:not(.is-collapsed) .wz-text-expand{display:none}
/* Expandable content (cart list + totals) — header 와 1줄 line 으로 분리 */
.wz-cart-expand{
display:flex;flex-direction:column;
flex:1 1 auto;
overflow-y:auto; /* scroll 을 expand 레벨로 통합 (color 분할 펼침 가림 방지) */
overflow-x:hidden;
border-top:1px solid var(--lenif-line);
padding-top:10px;
min-height:0;
}
.wz-cart-stick.is-collapsed .wz-cart-expand{display:none}
/* 패널 내 합계 — 콤팩트 + 중복 line 제거 (qb-total 기본 border 모두 제거) */
.wz-cart-stick #wz-total{
margin:10px 0 0;
border-top:1px solid var(--lenif-line); /* 카트 list 와 분리 1줄 */
border-bottom:none;
padding-top:4px;
}
.wz-cart-stick #wz-total .r{
padding:5px 0;font-size:12px;
border-bottom:none; /* row 간 line 제거 — 행 간격으로 구분 */
}
.wz-cart-stick #wz-total .r.r-final{
padding:9px 0 4px;margin-top:4px;
border-top:1px solid var(--lenif-line); /* 최종 합계만 강조 line */
}
.wz-cart-stick #wz-total .r.r-final .k{font-size:14px}
.wz-cart-stick #wz-total .r.r-final .v{font-size:18px}
/* 판매가 대비 파트너 할인 — 고객이 혜택을 즉시 인지 */
.wz-cart-stick #wz-total .r.r-list .k{color:var(--lenif-meta);font-weight:400}
.wz-cart-stick #wz-total .r.r-list .v s{
color:var(--lenif-meta);text-decoration-thickness:1px;
font-weight:400;font-feature-settings:"tnum";
}
.wz-cart-stick #wz-total .r.r-save{
padding-bottom:8px;border-bottom:1px dashed var(--lenif-line);margin-bottom:3px;
}
.wz-cart-stick #wz-total .r.r-save .k{color:var(--lenif-black);font-weight:700}
.wz-cart-stick #wz-total .r.r-save .v{
color:var(--lenif-orange);font-weight:800;font-feature-settings:"tnum";
}
/* 카트 list — scroll 은 .wz-cart-expand 가 담당, 내부 자체 scroll 제거 */
.wz-cart-stick #wz-cart{
margin:0;
max-height:none;
overflow:visible;
border-top:none;
}
/* 카트 = 제품별 그룹 카드 (여러 제품·옵션 명확 구분 — 최신 커머스 패턴) */
.wz-cart-stick .wz-cart-item-wrap{
background:var(--lenif-white);
border:1px solid var(--lenif-line);
border-radius:14px;
padding:14px 14px 12px;
margin:0 0 10px;
}
.wz-cart-stick .wz-cart-item-wrap:last-child{margin-bottom:4px}
.wz-cart-stick .wz-cart-item-wrap + .wz-cart-item-wrap{
border-top:1px solid var(--lenif-line);
margin-top:0;padding-top:14px;
}
.wz-cart-stick .wz-cart-row{padding:0;border-bottom:none}
.wz-cart-stick .wz-cart-row:first-child{padding-top:0}
/* 제품명 = 그룹 헤더 */
.wz-cart-stick .wz-cart-item-wrap .wz-cart-info .n{
font-size:15px;font-weight:800;margin-bottom:5px;
}
/* Empty state — toggle bar 자체 숨김 (펼칠 내용 없음) + total 숨김 */
.wz-cart-stick.is-empty .wz-toggle-bar{display:none}
.wz-cart-stick.is-empty .wz-cart-quick-total{display:none}
/* 빈 카트 안내 — count 자리에 안내 문구 인라인 */
.wz-cart-stick.is-empty .wz-cart-count{
font-size:12px;font-weight:400;color:var(--lenif-meta);
letter-spacing:0;
}
.wz-cart-stick.is-empty .wz-cart-stick-head .lbl-sm{display:none}
/* Nav buttons — 항상 노출, line 없이 padding 만으로 구분 */
.wz-cart-stick .wz-nav-row{
display:flex;gap:8px;flex-shrink:0;
padding-top:12px;margin-top:0;
border-top:none;
}
.wz-cart-stick.is-collapsed .wz-nav-row{padding-top:8px}
.wz-cart-stick.is-empty .wz-nav-row{padding-top:6px}
/* Step 2 콘텐츠 영역 padding — 접힘/펼침 상태별 동적 */
.wz-pane[data-pane="2"]{padding-bottom:22vh} /* 기본: 접힘 + 빈 카트 (작은 패널) */
/* 펼침 + items 있음 → 큰 padding */
.wz-pane[data-pane="2"]:has(.wz-cart-stick:not(.is-collapsed):not(.is-empty)){padding-bottom:60vh}
/* 접힘이지만 items 있음 → 중간 padding */
.wz-pane[data-pane="2"]:has(.wz-cart-stick.is-collapsed:not(.is-empty)){padding-bottom:24vh}
/* Step 2 · cart (legacy class — fixed 패널 내부에서 사용) */
.wz-cart{margin:8px 0 0;border-top:1px solid var(--lenif-line)}
.wz-cart-row{
display:flex;align-items:center;gap:10px;
padding:14px 0;border-bottom:1px solid var(--lenif-line);
}
.wz-cart-thumb{
flex:0 0 52px;height:62px;background:var(--lenif-white);
border:1px solid var(--lenif-line);border-radius:10px;overflow:hidden;
padding:3px;font-size:7px;
}
.wz-cart-thumb::before{font-size:6px;padding:1px 2px;letter-spacing:0.06em;top:1px;left:1px}
.wz-cart-thumb .ph-name{font-size:7px}
.wz-cart-thumb .ph-size{display:none}
.wz-cart-info{flex:1;min-width:0}
.wz-cart-info .n{font-size:14px;font-weight:700;color:var(--lenif-black);margin:0 0 4px;line-height:1.3}
.wz-cart-info .d{font-size:11px;color:var(--lenif-meta);margin:0;line-height:1.5}
/* 판매가 → 파트너가 즉시 혜택 표시 */
.wz-cart-info .d.d-price{
display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:0 0 2px;line-height:1.2;
}
.wz-cart-info .d-price s{
color:var(--lenif-meta);font-size:11px;text-decoration-thickness:1px;
font-feature-settings:"tnum";
}
.wz-cart-info .d-price .now{
color:var(--lenif-black);font-size:14px;font-weight:800;
font-feature-settings:"tnum";letter-spacing:-0.01em;
}
.wz-cart-info .d-price .save-badge{
color:var(--lenif-orange);font-size:10px;font-weight:800;
background:var(--lenif-orange-bg);padding:1px 6px;
border-radius:var(--radius-pill);letter-spacing:0.02em;
}
.wz-cart-info .d.d-meta{
font-size:10px;color:var(--lenif-meta);margin:0;letter-spacing:0.01em;
}
/* 색상별 구매 수량 + 총 수량 — 한눈에 인지 */
.wz-cart-info .d.d-colormix{
font-size:10px;color:var(--lenif-meta);margin:3px 0 0;letter-spacing:0.01em;
display:flex;gap:7px;flex-wrap:wrap;align-items:baseline;
}
.wz-cart-info .d-colormix .cm-mix{
color:var(--lenif-black);font-weight:600;font-feature-settings:"tnum";
}
.wz-cart-info .d-colormix .cm-sep{color:var(--lenif-line)}
.wz-cart-info .d-colormix .cm-total{
color:var(--lenif-black);font-weight:800;font-feature-settings:"tnum";
}
.wz-cart-ctrl{
display:flex;align-items:center;gap:0;flex-shrink:0;
border:none;border-radius:8px;overflow:hidden;
background:var(--lenif-bg-soft);
}
.wz-qty-btn{
width:32px;height:32px;border:none;background:transparent;
cursor:pointer;font-size:14px;font-weight:700;color:var(--lenif-black);
line-height:1;font-family:inherit;
}
.wz-qty-btn:hover{background:#ECEAE4}
.wz-qty-num{
width:44px;height:32px;border:none;
background:var(--lenif-white);
text-align:center;font-size:13px;font-weight:700;
color:var(--lenif-black);font:inherit;outline:none;
-moz-appearance:textfield;font-feature-settings:"tnum";
}
.wz-qty-num::-webkit-outer-spin-button,
.wz-qty-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wz-cart-sub{
display:flex;flex-direction:column;align-items:flex-end;gap:4px;
flex-shrink:0;min-width:80px;
}
.wz-cart-sub .sub-list{
font-size:10px;color:var(--lenif-meta);
text-decoration-thickness:1px;font-feature-settings:"tnum";line-height:1;
}
.wz-cart-sub .sub{
font-size:14px;font-weight:700;color:var(--lenif-black);
font-feature-settings:"tnum";text-align:right;
}
.wz-cart-sub .sub-save{
font-size:10px;font-weight:800;color:var(--lenif-orange);
font-feature-settings:"tnum";letter-spacing:0.01em;line-height:1;
}
.wz-cart-rm{
border:none;background:none;color:var(--lenif-meta);
cursor:pointer;font-size:14px;padding:0;
}
.wz-cart-rm:hover{color:var(--lenif-black)}
/* Step 2 · cart-row 내부 색상 분할 (collapsible · chip 스타일로 visibility 강화) */
.wz-color-block{
margin:12px 0 0;padding:12px 0 0 12px;
border-top:1px solid var(--lenif-line);
border-left:2px solid var(--lenif-line);
}
/* 색상 블록 바로 뒤 옵션 블록 — 상단 라인/들여쓰기 중복 제거 (연속 그룹) */
.wz-color-block + .wz-options-block{
border-top:none;margin-top:6px;padding-top:0;
}
.wz-color-toggle{
background:transparent;
border:none;
cursor:pointer;
font-size:12px;color:var(--lenif-black);
font-family:inherit;font-weight:700;
letter-spacing:0.02em;padding:2px 2px;
display:flex;align-items:center;justify-content:space-between;gap:8px;
width:100%;text-align:left;
border-radius:0;
transition:color .15s;
}
.wz-color-toggle::before{
content:"⊕"; font-size:14px;line-height:1;
margin-right:2px;font-weight:400;
}
.wz-color-toggle.is-open::before{content:"⊖"}
.wz-color-toggle:hover{
color:var(--lenif-orange);
}
.wz-color-toggle:active{opacity:0.85}
.wz-color-toggle::after{
content:"";display:inline-block;
width:7px;height:7px;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform:rotate(45deg);
transition:transform .2s;
margin-left:auto;margin-bottom:3px;
}
.wz-color-toggle.is-open::after{transform:rotate(-135deg);margin-bottom:-2px}
.wz-color-toggle .toggle-text{flex:1}
.wz-color-detail{padding:4px 0 8px}
.wz-color-detail[hidden]{display:none}
/* ── 비례 분할 바 (텍스트 없이 직관) — 두 색이 고정 총량을 나눠 가짐 ── */
.wz-split{margin:6px 0 12px;user-select:none}
.wz-split-bar{
display:flex;align-items:stretch;
height:38px;border-radius:var(--radius);
border:1px solid var(--lenif-line);overflow:hidden;
cursor:ew-resize;touch-action:none;position:relative;
background:var(--lenif-bg-soft);
}
.wz-split:not(.is-dragging) .wz-split-seg{transition:flex-basis .18s cubic-bezier(.16,1,.3,1)}
.wz-split-seg{flex-grow:0;flex-shrink:0;min-width:0;position:relative}
/* 화이트/밝은 색 세그먼트가 배경에 묻히지 않게 내부 음영 */
.wz-split-seg.seg1{box-shadow:inset 1px 0 0 rgba(0,0,0,.06)}
.wz-split-handle{
flex:0 0 2px;background:var(--lenif-white);
position:relative;z-index:2;cursor:ew-resize;
box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.wz-split-handle .grip{
position:absolute;top:50%;left:50%;
width:22px;height:22px;border-radius:50%;
transform:translate(-50%,-50%);
background:var(--lenif-white);
border:1px solid var(--lenif-line);
box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.wz-split-handle .grip::before{
content:"";position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:7px;height:9px;
background:
linear-gradient(var(--lenif-meta),var(--lenif-meta)) 0/2px 100% no-repeat,
linear-gradient(var(--lenif-meta),var(--lenif-meta)) 50%/2px 100% no-repeat,
linear-gradient(var(--lenif-meta),var(--lenif-meta)) 100%/2px 100% no-repeat;
}
.wz-split.is-dragging .wz-split-handle .grip{
border-color:var(--lenif-black);
box-shadow:0 0 0 4px rgba(26,26,26,.08),0 2px 6px rgba(0,0,0,.2);
}
.wz-split-handle:focus-visible .grip{
border-color:var(--lenif-black);
box-shadow:0 0 0 3px rgba(26,26,26,.10);outline:none;
}
.wz-split-legend{
display:flex;justify-content:space-between;
margin-top:8px;font-size:12px;color:var(--lenif-body);
}
.wz-split-legend .lg{display:flex;align-items:center;gap:6px;letter-spacing:0.01em}
.wz-split-legend .lg i{
width:11px;height:11px;border-radius:50%;
border:1px solid rgba(0,0,0,.12);flex-shrink:0;
}
.wz-split-legend .lg b{
font-weight:700;color:var(--lenif-black);
font-feature-settings:"tnum";margin-left:2px;
}
.wz-split-steppers{
display:flex;gap:10px;flex-wrap:wrap;
}
.wz-split-steppers .wz-color-qty-ctrl{border-radius:var(--radius)}
.wz-split-steppers .sw{
width:14px;height:14px;border-radius:50%;
border:1px solid rgba(0,0,0,.12);
margin:0 6px 0 8px;flex-shrink:0;align-self:center;
}
.wz-color-note{
font-size:10px;color:var(--lenif-meta);
margin:0 0 8px;line-height:1.55;
padding:8px 10px;background:var(--lenif-bg-soft);
border:none;border-radius:6px;
}
.wz-color-input-row{
display:flex;align-items:center;gap:8px;
padding:5px 0;
}
.wz-color-input-row label{
font-size:12px;color:var(--lenif-body);flex:1;
font-weight:700;
}
.wz-color-qty-ctrl{
display:flex;align-items:center;
border:none;border-radius:8px;overflow:hidden;
background:var(--lenif-bg-soft);
flex-shrink:0;
}
.wz-color-qty-ctrl button{
width:26px;height:28px;border:none;background:transparent;
cursor:pointer;font-size:13px;font-weight:700;color:var(--lenif-black);
line-height:1;font-family:inherit;padding:0;
}
.wz-color-qty-ctrl button:hover{background:#ECEAE4}
.wz-color-qty{
width:38px;height:28px;border:none;
background:var(--lenif-white);
text-align:center;font-size:11px;font-weight:700;
color:var(--lenif-black);font:inherit;outline:none;
-moz-appearance:textfield;
font-feature-settings:"tnum";
}
.wz-color-qty::-webkit-outer-spin-button,
.wz-color-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wz-opt-qty{
width:38px;height:28px;border:none;background:var(--lenif-white);
text-align:center;font-size:11px;font-weight:700;color:var(--lenif-black);
font:inherit;outline:none;-moz-appearance:textfield;font-feature-settings:"tnum";
}
.wz-opt-qty::-webkit-outer-spin-button,
.wz-opt-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* 수량 기반 구성 행 (색상별·옵션별 공통) */
.wz-cfg-lbl{
font-size:10px;letter-spacing:0.12em;color:var(--lenif-orange);
font-weight:800;margin:0 0 8px;text-transform:uppercase;
}
.wz-cfg-rows{display:flex;flex-direction:column;gap:8px}
.wz-cfg-row{display:flex;align-items:center;gap:10px}
.wz-cfg-row .sw{
width:14px;height:14px;border-radius:50%;flex-shrink:0;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.wz-cfg-row .cfg-name{
flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--lenif-black);
line-height:1.3;letter-spacing:-0.01em;
}
.wz-cfg-row .wz-color-qty-ctrl{flex-shrink:0}
/* 옵션 행 — 썸네일 + 라벨·단가 + 포함 대수 스테퍼 */
.wz-opt-row .wz-option-thumb{
flex:0 0 38px;width:38px;height:46px;background:var(--lenif-white);
border:1px solid var(--lenif-line);border-radius:6px;overflow:hidden;
display:block;cursor:zoom-in;transition:transform .12s;
}
.wz-opt-row .wz-option-thumb:hover{transform:scale(1.05)}
.wz-opt-row .wz-option-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wz-opt-row .opt-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wz-opt-row .opt-info .cfg-name{font-size:12px}
.wz-opt-row .opt-price{
font-size:10px;font-weight:700;color:var(--lenif-orange);
font-feature-settings:"tnum";letter-spacing:0.01em;
}
.wz-opt-help{
font-size:10px;color:var(--lenif-meta);margin:8px 0 0;line-height:1.5;
}
.wz-color-status{
font-size:10px;color:var(--lenif-meta);
margin:6px 0 0;letter-spacing:0.02em;line-height:1.5;
text-align:right;
}
.wz-color-status.is-match{color:var(--lenif-meta);font-weight:700}
.wz-color-status.is-mismatch{color:#c44}
/* Flash toast */
.wz-flash{
position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
background:var(--lenif-black);color:var(--lenif-white);
padding:12px 18px;font-size:13px;font-weight:700;
opacity:0;transition:opacity .2s, transform .2s;
z-index:200;pointer-events:none;letter-spacing:-0.01em;
box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.wz-flash.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---------- (legacy) Quote Builder — kept for receipt reuse ---------- */
.qb-lines{display:flex;flex-direction:column;gap:14px;margin:0 0 12px}
.qb-line{
border:1px solid var(--lenif-line);
padding:16px 14px;background:var(--lenif-white);
position:relative;
}
.qb-line .qb-remove{
position:absolute;top:10px;right:10px;
border:none;background:none;color:var(--lenif-meta);
font-size:18px;cursor:pointer;line-height:1;
padding:4px 8px;
}
.qb-line .qb-remove:hover{color:var(--lenif-black)}
.qb-line .qb-row{display:flex;gap:10px;margin-bottom:12px}
.qb-line .qb-row .field{flex:1}
.qb-line .field label{font-size:10px}
.qb-line .field select,.qb-line .field input{
padding:10px 12px;font-size:14px;
}
.qb-line .qb-summary{
padding-top:12px;border-top:1px solid var(--lenif-line);
display:flex;justify-content:space-between;align-items:baseline;
font-size:13px;
}
.qb-line .qb-summary .lbl-disc{
font-size:10px;letter-spacing:0.12em;color:var(--lenif-orange);
font-weight:700;
}
.qb-line .qb-summary .unit{color:var(--lenif-meta);font-size:12px}
.qb-line .qb-summary .sub{
font-weight:700;color:var(--lenif-black);
font-size:15px;font-feature-settings:"tnum";
}
.qb-line .qb-note{
margin-top:8px;font-size:11px;color:var(--lenif-meta);
line-height:1.55;
}
.qb-line .qb-note.warn{color:var(--lenif-orange);font-weight:700}
.qb-total{
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
}
.qb-total .r{
display:flex;justify-content:space-between;align-items:baseline;
padding:12px 0;font-size:13px;
border-bottom:1px solid var(--lenif-line);
}
.qb-total .r:last-child{border-bottom:none}
.qb-total .r .k{color:var(--lenif-meta)}
.qb-total .r .v{font-weight:700;color:var(--lenif-black);font-feature-settings:"tnum"}
.qb-total .r.r-final{padding:18px 0}
.qb-total .r.r-final .k{
color:var(--lenif-black);font-weight:700;font-size:15px;
}
.qb-total .r.r-final .v{
font-size:22px;color:var(--lenif-orange);letter-spacing:-0.015em;
}
/* ---------- Receipt view ---------- */
.receipt{
background:var(--lenif-white);
padding:32px 24px 48px;
}
.r-head{
display:flex;justify-content:space-between;align-items:flex-start;
border-bottom:1px solid var(--lenif-line);
padding-bottom:18px;margin-bottom:24px;
}
/* 브랜드 로고 락업 — 레니프 LENIF (한/영 혼합, 스크린샷 검색성) */
.r-brand{display:flex;flex-direction:column;gap:5px}
.r-logo{display:flex;align-items:baseline;gap:7px;margin:0}
.r-logo .r-symbol{
height:30px;width:auto;display:block;align-self:center;
margin-right:2px;flex-shrink:0;
}
.r-logo-ko{
font-size:22px;font-weight:800;letter-spacing:-0.02em;
color:var(--lenif-black);line-height:1;
}
.r-logo-en{
font-size:13px;font-weight:700;letter-spacing:0.22em;
color:var(--lenif-orange);line-height:1;
}
.r-yr{font-size:10px;letter-spacing:0.12em;color:var(--lenif-meta);margin:0}
/* 수신처 — 견적 요청 회사 (입력 시 강조 / 미입력 시 대시 chip) */
.r-to{
font-size:19px;font-weight:800;color:var(--lenif-black);
letter-spacing:-0.02em;line-height:1.3;margin:0 0 8px;
}
.r-to.is-empty{
display:inline-block;font-size:12px;font-weight:500;
color:var(--lenif-meta);letter-spacing:0;
padding:7px 12px;border:1px dashed var(--lenif-line);
border-radius:var(--radius);background:var(--lenif-bg-soft);
}
.r-title{
font-size:28px;font-weight:700;letter-spacing:-0.025em;
color:var(--lenif-black);margin:0 0 6px;line-height:1.2;
}
.r-no{
font-size:13px;color:var(--lenif-orange);font-weight:700;
letter-spacing:0.08em;margin:0 0 24px;
font-feature-settings:"tnum";
}
.r-meta{
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
margin:0 0 24px;
}
.r-meta>div{
display:flex;justify-content:space-between;align-items:baseline;
padding:10px 0;border-bottom:1px solid var(--lenif-line);
font-size:13px;
}
.r-meta>div:last-child{border-bottom:none}
.r-meta .k{color:var(--lenif-meta);min-width:70px}
.r-meta .v{color:var(--lenif-black);font-weight:700;text-align:right}
.r-table{
width:100%;border-collapse:collapse;
margin:0 0 24px;font-size:12px;
font-feature-settings:"tnum";
}
.r-table thead th{
text-align:left;padding:10px 4px;
border-top:1px solid var(--lenif-black);
border-bottom:1px solid var(--lenif-line);
font-size:10px;letter-spacing:0.12em;color:var(--lenif-meta);
font-weight:700;text-transform:uppercase;
}
.r-table th.c{text-align:center}
.r-table th.r,.r-table td.r{text-align:right}
.r-table tbody td{
padding:14px 4px;
border-bottom:1px solid var(--lenif-line);
color:var(--lenif-black);vertical-align:top;
}
.r-table tbody td .pname{font-weight:700;font-size:13px;line-height:1.4}
.r-table tbody td .pdisc{font-size:11px;color:var(--lenif-orange);font-weight:700;margin-top:4px}
.r-table tfoot td{
padding:10px 4px;font-size:12px;color:var(--lenif-body);
border-bottom:1px solid var(--lenif-line);
}
.r-table tfoot tr.r-final td{
font-weight:700;font-size:14px;color:var(--lenif-black);
padding:14px 4px;border-bottom:none;border-top:1px solid var(--lenif-black);
}
.r-table tfoot tr.r-final td:last-child{color:var(--lenif-orange);font-size:18px}
/* 정상가(판매가) — 흐린 취소선 / 파트너 혜택 — 오렌지 강조 */
.r-table tfoot tr.r-list td{color:var(--lenif-meta)}
.r-table tfoot tr.r-list td s{color:var(--lenif-meta)}
.r-table tfoot tr.r-save td{
color:var(--lenif-orange);font-weight:700;
background:var(--lenif-orange-bg);
}
.r-table tbody td .pdisc s{color:var(--lenif-meta);font-weight:400}
/* 완전 조립 — 포함 서비스 (제품 열) */
.r-table tbody td .passemble{
font-size:11px;color:var(--lenif-body);font-weight:600;
margin-top:3px;letter-spacing:0.01em;
}
.r-table tbody td .passemble::before{
content:"✓ ";color:var(--lenif-orange);font-weight:800;
}
/* 배송·조립 행 — 금액 대신 서비스 명시 (오타·0원 오해 방지) */
.r-table tfoot tr.r-ship td:last-child{
color:var(--lenif-black);font-weight:700;font-size:12px;
}
.r-notes{margin:24px 0}
.r-notes ul{
list-style:none;padding:0;font-size:12px;
color:var(--lenif-body);line-height:1.7;
}
.r-notes ul li{
padding:6px 0 6px 14px;position:relative;
border-bottom:1px dashed var(--lenif-line);
}
.r-notes ul li:last-child{border-bottom:none}
.r-notes ul li::before{
content:"·";position:absolute;left:4px;top:6px;
color:var(--lenif-orange);font-weight:700;
}
.r-vendor{
margin:24px 0;padding:18px 0;
border-top:1px solid var(--lenif-line);
border-bottom:1px solid var(--lenif-line);
}
.r-vname{
font-size:14px;font-weight:700;color:var(--lenif-black);
margin:6px 0 8px;letter-spacing:0.04em;
}
.r-vmeta{font-size:11px;color:var(--lenif-meta);margin:2px 0;line-height:1.55}
/* 작성·저장 패널 — 정식 견적서(위)와 시각적으로 분리된 화면 전용 액션 존 */
.r-finalize{
margin-top:28px;padding:22px 20px 24px;
background:var(--lenif-bg-soft);
border:1px solid var(--lenif-line);
border-radius:10px;
}
.r-finalize-head{
font-size:14px;font-weight:800;color:var(--lenif-black);
letter-spacing:0.01em;margin:0 0 4px;
}
.r-finalize-sub{
font-size:11.5px;color:var(--lenif-meta);line-height:1.55;margin:0 0 16px;
}
.r-finalize-sub strong{color:var(--lenif-orange);font-weight:700}
/* 견적서 내 고객 정보 입력 (결과 다음, 라이브 반영) */
.r-customer{margin:0 0 4px;padding:0}
.r-customer .lbl-sm{margin:0 0 12px}
.r-customer .form{display:flex;flex-direction:column;gap:10px}
.r-customer .field{display:flex;flex-direction:column;gap:5px}
.r-customer .field label{
font-size:11px;font-weight:700;color:var(--lenif-meta);
letter-spacing:0.06em;
}
.r-customer input{
width:100%;padding:11px 12px;font:inherit;font-size:14px;
border:1px solid var(--lenif-line);border-radius:var(--radius);
color:var(--lenif-black);background:var(--lenif-white);
outline:none;transition:border-color .15s;
}
.r-customer input:focus{border-color:var(--lenif-orange)}
.r-save-hint{
font-size:11px;color:var(--lenif-meta);
text-align:center;margin:8px 0 0;line-height:1.5;
}
.r-save-hint strong{color:var(--lenif-orange);font-weight:700}
.r-actions{margin-top:18px}
/* ---------- Print ---------- */
@media print{
@page{size:A4;margin:14mm}
body{background:var(--lenif-white);display:block;padding:0}
.phone{box-shadow:none;border-radius:0;width:100%;min-height:auto}
.phone::before,.phone::after{display:none}
.status,.sticky-cta,.helper,.nav,#cover,#why,#matrix,#usecase,#pd-foldfit,#pricing,#delivery,#process,#quote,#contact,footer{display:none !important}
section.receipt{display:block !important;padding:0;break-inside:auto}
.r-actions,#r-close,.r-customer,.r-finalize,.r-to.is-empty{display:none !important}
.receipt{font-size:11px}
.r-to{font-size:17px}
.r-title{font-size:24px}
.r-logo-ko{font-size:20px}
.r-logo .r-symbol{height:26px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
a{color:inherit;text-decoration:none}
}