/* =========================================================
KINZELUBE — Clean Single-Color (Burgundy) Styles
Tip) 권장 폰트:
========================================================= */
/* ===== Base / Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth}
/* ===== Design Tokens ===== */
:root{
--brand:#800020; /* ★ 단색 버건디 */
--bg:#f7f7f8;
--card:#ffffff;
--ink:#101828;
--muted:#667085;
--line:#e5e7eb;
--ring:rgba(128,0,32,.22);
--radius:16px;
--shadow:0 10px 30px rgba(16,24,40,.06);
--shadow-soft:0 1px 2px rgba(16,24,40,.08);
}
/* ===== Typography ===== */
body{
font-family:"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
color:var(--ink); background:var(--bg); line-height:1.6;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
letter-spacing:-.005em;
}
/* ===== Utilities ===== */
.container{width:min(1120px,100% - 2rem);margin-inline:auto}
.section{padding:72px 0}
.section-header{text-align:center;margin-bottom:32px}
.section-title{font-size:clamp(1.25rem,2.4vw,2rem);font-weight:800;letter-spacing:-.015em;line-height:1.25}
.section-sub{color:var(--muted);margin-top:8px}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid-4,.grid-3{grid-template-columns:1fr}}
.visually-hidden{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;padding:8px 12px;background:#fff;color:#000;border-radius:8px;z-index:10000;outline:2px solid var(--brand)}
/* ===== Buttons ===== */
.btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.75rem 1rem;border-radius:9999px;font-weight:700;
background:var(--brand);color:#fff;border:1px solid rgba(0,0,0,.04);
box-shadow:var(--shadow-soft);transition:transform .05s ease,filter .15s ease;
}
.btn:hover{filter:brightness(.92)}
.btn:active{transform:translateY(1px)}
.btn.outline{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn.outline:hover{background:#fafafa}
/* ===== Card ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
/* ===== Header / Nav (always on top) ===== */
.site-header{
position:sticky; top:0; z-index:100000;
overflow:visible; isolation:isolate;
background:rgba(255,255,255,.7);
-webkit-backdrop-filter:saturate(180%) blur(10px);
backdrop-filter:saturate(180%) blur(10px);
border-bottom:1px solid rgba(226,232,240,.8);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:900;letter-spacing:-.02em}
.logo-img{height:60px;width:auto;display:block}
.brand-text{display:none}
.hamburger{
display:none;
background:none;border:none;padding:.5rem;border-radius:8px;
position:relative; z-index:100010; /* ← 버튼 항상 맨 위 */
cursor:pointer;
}
.hamburger svg{width:24px;height:24px}
.primary-nav{position:relative; z-index:100001}
.primary-nav .menu{
display:flex;gap:.5rem;align-items:center;list-style:none;margin:0;padding:0
}
.primary-nav .menu>li>a.navlink{
padding:.5rem .75rem;border-radius:8px;font-weight:700;color:var(--ink);display:block
}
.primary-nav .menu>li>a.navlink:hover{background:#f2f4f7;color:var(--brand)}
.has-dropdown{position:relative}
.has-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
/* 기본 드롭다운: 숨김 */
.has-dropdown > .dropdown{
display:none; position:absolute; top:100%; left:0; margin-top:8px;
background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
min-width:220px; overflow:hidden; padding:6px 0; z-index:100002;
}
/* 데스크톱: hover/focus 표시 */
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown{ display:block; }
/* 2열 레이아웃 */
.dropdown.dropdown-cols{ display:block; }
.has-dropdown:hover > .dropdown.dropdown-cols,
.has-dropdown:focus-within > .dropdown.dropdown-cols{
display:grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); column-gap:0;
}
.dropdown li.hd{
padding:8px 14px;font-weight:800;color:#475569;pointer-events:none;border-top:1px solid #f1f5f9
}
.dropdown li.hd:first-child{ border-top:0; }
.has-dropdown .dropdown a{display:block;padding:10px 14px;border-top:1px solid #f2f4f7}
.has-dropdown .dropdown a:first-child{border-top:none}
.has-dropdown .dropdown a:hover{background:#f9fafb;color:var(--brand);font-weight:700}
/* === Mobile === */
@media (max-width:860px){
.hamburger{ display:inline-flex; }
/* 메뉴를 고정 레이어로 띄워서 클릭 방해 요소 제거 */
.primary-nav{ position:static; }
.primary-nav .menu{
display:none;
position:fixed; /* ← absolute → fixed 로 변경 */
top:64px; left:0; right:0; /* 헤더 아래에 고정 */
background:#fff;
border-bottom:1px solid var(--line);
box-shadow:var(--shadow);
flex-direction:column;
padding:8px 0;
z-index:100005; /* 헤더보다 위 */
}
.site-header.open .primary-nav .menu{ display:block; } /* ← 햄버거로 열기 */
.primary-nav .menu>li>a{ padding:14px 20px; }
/* 모바일 드롭다운: 클릭으로 펼침 */
.has-dropdown > .dropdown{
position:static; margin-top:0; border:0; box-shadow:none;
display:none; padding:0 0 8px; z-index:auto;
}
.has-dropdown.open > .dropdown{ display:block; }
.has-dropdown.open > .dropdown.dropdown-cols{ display:block; } /* 1열로 */
}
/* 모바일에서 햄버거 → 로고 → (메뉴) 순으로 정렬 */
@media (max-width: 860px){
.container.nav{
display:flex;
align-items:center;
justify-content:flex-start; /* 왼쪽 정렬 */
gap:8px;
}
.hamburger{
order: 0; /* 햄버거를 맨 앞 */
display:inline-flex; /* 혹시 숨겨졌으면 보이게 */
z-index:100010; /* 메뉴 레이어 위로 */
position:relative;
}
.brand{
order: 1; /* 로고는 두 번째 */
margin-left: 4px; /* 살짝 간격 */
}
.primary-nav{
order: 2; /* 네비는 마지막(모바일에선 레이어로 열림) */
}
}
/* ===== Hero (단색 버건디) ===== */
.hero{position:relative;background:var(--brand);color:#fff}
.hero .inner{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:32px;padding:36px 0 24px}
.hero h1{color:#fff;font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;margin:0 0 12px;letter-spacing:-.02em}
.hero p{color:#f2e9ed;margin:0 0 20px}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-illust{
aspect-ratio:4/3;border-radius:var(--radius);
background:#6a001a; border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow);
display:grid;place-items:center;font-weight:800;color:#f9f1f3;
}
@media (max-width:980px){.hero .inner{grid-template-columns:1fr}.hero-illust{order:-1}}
/* ===== Info Bar (optional) ===== */
.infobar{background:#0b1220;color:#e5e7eb}
.infobar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:.95rem}
.infobar a{color:#d1d9ff;text-decoration:underline}
/* ===== Products / Cards ===== */
.product{display:flex;flex-direction:column;height:100%;cursor:pointer}
.product .thumb{aspect-ratio:16/10;background:#fff;display:grid;place-items:center;color:#667085;font-weight:700;border-bottom:1px solid var(--line)}
.product .thumb img{width:86%;height:auto;object-fit:contain}
.product .body{padding:14px;display:grid;gap:6px}
.product .kicker{font-size:.8rem;color:var(--muted)}
.product .title{font-weight:800;letter-spacing:-.01em}
.product .meta{margin-top:4px;display:flex;gap:.5rem;align-items:center;color:var(--muted);font-size:.9rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.filter-btn{background:#fff;border:1px solid #cbd5e1;padding:.5rem .75rem;border-radius:999px;font-weight:700;cursor:pointer}
.filter-btn.active,.filter-btn:hover{background:#f2f4f7;border-color:#94a3b8;color:var(--brand)}
/* ===== Premium Lead / Intro (선택) ===== */
.rich-intro{
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-soft);
padding: 26px 28px;
}
.rich-intro .eyebrow{
display:inline-block;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
color: var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 10px; margin-bottom:10px;
}
.rich-intro .lead-title{ margin:0; font-size:clamp(1.6rem,3vw,2.25rem); letter-spacing:-.015em; line-height:1.25; }
.rich-intro .lead-bar{ display:block; width:72px; height:3px; background:var(--brand); border-radius:2px; margin:10px 0 14px; }
.rich-intro .lead-copy{ color:#2a2d33; }
.rich-intro .lead-copy p{ margin:0 0 8px; }
.rich-intro .lead-points{ list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; }
.rich-intro .lead-points li{ position:relative; padding-left:22px; color:#3b3f45; font-weight:600; }
.rich-intro .lead-points li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1; margin-top:2px; font-weight:800; color:var(--brand); }
@media (max-width:900px){ .rich-intro .lead-points{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .rich-intro{ padding:20px; } .rich-intro .lead-points{ grid-template-columns:1fr; } }
/* ===== Off-canvas (optional) ===== */
.cat-toggle{position:fixed;left:16px;top:120px;z-index:55;padding:.6rem .8rem;border-radius:999px;background:#111827;color:#fff;border:1px solid #1f2937;box-shadow:var(--shadow)}
.cat-panel{position:fixed;left:0;top:0;bottom:0;width:320px;background:#fff;border-right:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(-100%);transition:transform .25s ease;z-index:60;display:flex;flex-direction:column}
.cat-panel.open{transform:translateX(0)}
.cat-panel .hd{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #e5e7eb}
.cat-panel .body{padding:12px;overflow:auto}
.cat-panel input[type="search"]{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px}
.cat-list{list-style:none;padding:0;margin:12px 0 0}
.cat-list li a{display:flex;align-items:center;justify-content:space-between;padding:12px 10px;border-bottom:1px solid #f1f5f9;font-weight:700}
/* ===== Forms ===== */
form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field label{font-weight:800}
.field input,.field textarea,.field select{
background:#fff;border:1px solid #d0d5dd;border-radius:12px;padding:12px 14px;outline:none;
transition:box-shadow .15s ease,border-color .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.field small{color:var(--muted)}
.agreement{display:flex;align-items:flex-start;gap:10px;font-size:.95rem}
.agreement input{margin-top:4px}
/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:rgba(16,24,40,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:70}
.modal.open{display:flex}
.modal .sheet{background:#fff;border-radius:var(--radius);width:min(720px,100%);box-shadow:var(--shadow);overflow:hidden}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal .content{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}
.modal img{width:100%;height:auto;object-fit:contain}
@media (max-width:720px){.modal .content{grid-template-columns:1fr}}
/* ===== Back to top ===== */
.to-top{position:fixed;right:16px;bottom:16px;padding:.7rem .9rem;border-radius:999px;background:#111827;color:#fff;border:1px solid #1f2937;box-shadow:var(--shadow);display:none}
.to-top.show{display:inline-flex}
/* ===== Product Spec Table ===== */
.kz-desc{margin:.25rem 0 .75rem;color:#344054}
.kz-desc li{margin:2px 0}
.kz-table{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:.96rem;background:#fff}
.kz-table th,.kz-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.kz-table th{width:34%;background:#f5f6f7;color:#1f2937;font-weight:800;letter-spacing:-.01em;text-align:left;white-space:nowrap}
.kz-table tr:last-child th,.kz-table tr:last-child td{border-bottom:none}
@media (max-width:560px){.kz-table th,.kz-table td{padding:9px 10px}.kz-table{font-size:.95rem}.kz-table th{white-space:normal}}
/* --- Dropdown default: always hidden --- */
.primary-nav .dropdown { display: none !important; }
/* Desktop: show only on hover/focus */
@media (min-width: 861px) {
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
display: block !important;
}
/* 2열 메뉴는 '열렸을 때만' grid로 */
.has-dropdown:hover > .dropdown.dropdown-cols,
.has-dropdown:focus-within > .dropdown.dropdown-cols {
display: grid !important;
grid-template-columns: repeat(2, minmax(180px, 1fr));
column-gap: 0;
}
}
/* Mobile: 클릭으로 열기/닫기 (nav.js에서 .open 토글) */
@media (max-width: 860px) {
.has-dropdown > .dropdown { display: none !important; }
.has-dropdown.open > .dropdown { display: block !important; }
/* 모바일은 1열로 */
.has-dropdown.open > .dropdown.dropdown-cols {
display: block !important;
}
}
/* === Category Tiles — premium look === */
.category-tiles{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:18px;
}
.tile{
position:relative;
display:block;
height:168px; /* 살짝 높이 업 */
border-radius:16px;
overflow:hidden;
border:1px solid var(--line);
background:#0f172a; /* fallback */
transform:translateY(0);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
/* 타일 배경 이미지는 한 장만, 중앙에 꽉 채우기 */
.tile::before{
content:"";
position:absolute; inset:0;
background-image: var(--tile-bg, none); /* style="--tile-bg:url('...')" */
background-repeat: no-repeat; /* 반복 금지 */
background-size: cover; /* 박스를 꽉 채우기 (잘릴 수 있음) */
background-position: center; /* 중앙 기준 */
filter: brightness(.9) saturate(1.02);
}
/* 퍼플/버건디 라이트는 별도 레이어로 유지 */
.tile::after{
content:"";
position:absolute; inset:0;
background: radial-gradient(70% 50% at 0% 0%, rgba(128,0,32,.18), transparent 60%);
mix-blend-mode: overlay;
pointer-events:none;
}
/* 텍스트 라벨 */
.tile .label{
position:absolute; left:16px; bottom:16px;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.tile .label div{
font-weight:800;
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
letter-spacing:-.01em;
}
.tile .label small{
display:block; margin-top:2px;
opacity:.92; font-weight:600;
}
/* hover */
.tile:hover{
transform:translateY(-4px);
box-shadow:0 14px 30px rgba(16,24,40,.18);
border-color:rgba(128,0,32,.35);
filter:saturate(1.02);
}
/* 키보드 포커스 접근성 */
.tile:focus-visible{
outline:4px solid rgba(128,0,32,.25);
outline-offset:2px;
}
/* --- Subtabs: active 가독성 고정(흰 배경 + 버건디 텍스트) --- */
.subtabs a{
background:#fff;
color:var(--ink);
border:1px solid var(--line);
}
.subtabs a:hover{
background:#f9fafb;
color:var(--brand);
border-color:#d0d5dd;
}
/* 활성 표시: 글자색만 강조 + 보더 컬러 */
.subtabs a.active,
.subtabs a[aria-current="page"]{
background:#fff !important;
color:var(--brand) !important;
border-color:var(--brand) !important;
box-shadow: inset 0 0 0 2px rgba(128,0,32,.14);
}
/* 방문 링크 색이 덮어쓰지 않도록 */
.subtabs a:visited{ color:var(--ink); }
.subtabs a.active:visited,
.subtabs a[aria-current="page"]:visited{ color:var(--brand); }
/* --- (선택) 상단 네비의 active도 또렷하게 --- */
.primary-nav .menu > li > a.active{
background:#f2f4f7;
color:var(--brand);
border-radius:8px;
}
/* --- 2단 드롭다운(플라이아웃) --- */
.has-dropdown > .dropdown { overflow: visible; } /* 부모 클리핑 방지 */
.primary-nav .dropdown .has-sub{ position: relative; }
/* 우측 화살표(모바일 전용 토글 버튼) */
.primary-nav .dropdown .has-sub > .subexp{
display:none; /* 데스크톱에선 숨김 */
margin-left:6px;
width:22px;height:22px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;
}
.primary-nav .dropdown .has-sub > .subexp::after{
content:"▸"; display:block; line-height:20px; font-size:.8rem;
}
/* 플라이아웃 패널 (기본 숨김) */
.primary-nav .dropdown .has-sub > .flyout{
position:absolute; top:-6px; left:calc(100% + 8px);
min-width:220px; background:#fff; border:1px solid var(--line);
border-radius:12px; box-shadow:var(--shadow);
padding:6px 0; display:none; z-index:10010;
}
.primary-nav .dropdown .has-sub > .flyout a{
display:block; padding:10px 14px; border-top:1px solid #f2f4f7;
}
.primary-nav .dropdown .has-sub > .flyout a:first-child{ border-top:0; }
.primary-nav .dropdown .has-sub > .flyout a:hover{ background:#f9fafb; color:var(--brand); font-weight:700; }
/* 데스크톱: hover/focus 시 플라이아웃 표시 */
@media (min-width:861px){
.primary-nav .dropdown .has-sub:hover > .flyout,
.primary-nav .dropdown .has-sub:focus-within > .flyout{ display:block; }
}
/* 모바일: 1열 + 클릭으로 펼침 */
@media (max-width:860px){
.primary-nav .dropdown .has-sub{ padding-left:8px; }
.primary-nav .dropdown .has-sub > .subexp{ display:inline-block; }
.primary-nav .dropdown .has-sub > .flyout{
position:static; border:0; box-shadow:none; padding:0; display:none;
}
.primary-nav .dropdown .has-sub.open > .flyout{ display:block; }
.primary-nav .dropdown .has-sub.open > .subexp::after{ content:"▾"; }
}
/* Hero: 배경 이미지 + 버건디 오버레이 */
.hero{
--hero-image: none; /* 페이지마다 바꿔 끼울 이미지 */
--hero-tint: .60; /* 버건디 오버레이 투명도(0~1) */
position: relative;
background: var(--brand); /* 기본 버건디 색 */
color:#fff;
overflow: hidden;
}
.hero::before{
content:"";
position:absolute; inset:0;
background-image:
linear-gradient(180deg, rgba(128,0,32,var(--hero-tint)), rgba(128,0,32,var(--hero-tint))),
var(--hero-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: saturate(1.02) contrast(1.02); /* 톤 살짝 보정 */
z-index: 0;
}
.hero .inner{
position: relative; /* 텍스트는 배경 위로 */
z-index: 1;
}
/* 모바일(좁은 화면)에서는 다시 자연스러운 흐름으로 */
@media (max-width: 680px){
.ceo-card{ min-height: 0; } /* 강제 높이 해제 */
.ceo-meta{
margin-top: 12px; /* 위 여백만 살짝 */
margin-bottom: 0;
justify-content: flex-start; /* 가로는 좌측 정렬 */
text-align: left;
}
}
/* =========================
FINAL OVERRIDES (append)
========================= */
/* === CEO 레이아웃: 두 칼럼 같은 높이 + 스캔 이미지 가운데 === */
:root{ --ceo-h: 560px; } /* 필요시 480~640px로 조정 */
.ceo-grid{
display:grid;
grid-template-columns: 1.05fr 0.95fr;
gap:20px;
align-items:stretch; /* 행 높이에 맞춰 늘리기 */
}
.ceo-card{
display:flex;
flex-direction:column;
min-height:var(--ceo-h);
}
/* 오른쪽 칼럼도 같은 높이 확보 + 완전 중앙 정렬 */
.ceo-scan{
min-height:var(--ceo-h) !important; /* 카드와 동일 높이 */
display:flex !important;
align-items:center !important; /* 세로 중앙 */
justify-content:center !important; /* 가로 중앙 */
/* 혹시 위에서 다른 규칙이 덮고 있으면 !important 유지 */
}
/* 이미지가 박스 안에서 깔끔하게 */
.ceo-scan img{
display:block;
max-width:92%;
max-height:92%;
width:auto;
height:auto;
object-fit:contain;
}
/* 모바일에선 강제 높이 해제(자연스럽게) */
@media (max-width: 680px){
.ceo-card{ min-height:0; }
.ceo-scan{ min-height:0 !important; }
}
/* 모바일에선 강제 높이 풀고 자연스럽게 흐르도록 (원하면 유지 안 해도 됨) */
@media (max-width: 680px){
.ceo-card{ min-height: 0; }
.ceo-scan{ height: auto; }
}
/* ===== CEO Mini Hero with background image ===== */
.ceo-hero{
/* 페이지마다 교체할 변수 */
--ceo-hero-image: '/assets/img/hero/ceo-hero.jpg'; /* 예: url('/assets/img/hero/ceo-hero.jpg') */
--ceo-hero-tint: 0; /* 버건디 오버레이 강도(0~1) */
position: relative;
border-radius: 18px;
padding: clamp(18px, 3.2vw, 32px) clamp(16px, 3vw, 28px);
background: var(--brand); /* 이미지 로드 실패 시 fallback 색 */
color: #fff;
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
box-shadow: var(--shadow);
isolation: isolate; /* 오버레이 레이어 분리 */
}
/* 배경 이미지 + 버건디 오버레이 */
.ceo-hero::before{
content:"";
position:absolute; inset:0; z-index:-1;
background-image:
linear-gradient(180deg, rgba(128,0,32,var(--ceo-hero-tint)), rgba(128,0,32,var(--ceo-hero-tint))),
var(--ceo-hero-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: saturate(1.02) contrast(1.02);
}
/* 텍스트 스타일(가독성 업) */
.ceo-hero .eyebrow{
display:inline-block;
font-weight:800; font-size:.85rem; letter-spacing:.08em;
text-transform:uppercase;
color:#f3dbe3;
border:1px solid rgba(255,255,255,.28);
background: rgba(255,255,255,.08);
border-radius: 999px;
padding: 4px 10px;
margin-bottom: 10px;
}
.ceo-hero h1{
margin: 6px 0 8px;
font-size: clamp(1.25rem, 3.2vw, 1.85rem);
font-weight: 900; letter-spacing: -.02em; line-height: 1.25;
text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.ceo-hero p{
margin: 0;
color: #f5e9ee;
text-shadow: 0 1px 8px rgba(0,0,0,.22);
}
/* 아주 좁은 화면에서 패딩 살짝 축소 */
@media (max-width: 420px){
.ceo-hero{ border-radius: 14px; }
}
/* 헤더 바: 고정 height 대신 최소 높이 + 패딩으로 여유 */
.nav{
height: auto !important;
min-height: 64px;
padding-block: 10px; /* 로고 커져도 여유 확보 */
display: flex;
align-items: center;
justify-content: space-between;
}
/* 모바일에서 더 커 보이게(필요 시 조정) */
@media (max-width: 640px){
.site-header{ padding: 10px 14px; }
.site-header .logo-img{ height: 52px !important; } /* 모바일 로고 조금 더 큼 */
.nav{ min-height: 72px; padding-block: 10px; }
}
/* 3) 드롭다운 1세트로 통일 (기본 숨김 → 데스크톱 hover/포커스, 모바일 클릭) */
/* 기본: 숨김 */
.primary-nav .dropdown{ display: none !important; }
/* 데스크톱: hover/focus-within 시 표시 */
@media (min-width: 861px){
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown{
display: block !important;
}
.has-dropdown:hover > .dropdown.dropdown-cols,
.has-dropdown:focus-within > .dropdown.dropdown-cols{
display: grid !important;
grid-template-columns: repeat(2, minmax(180px, 1fr));
column-gap: 0;
}
}
/* 모바일: nav.js에서 .open 토글 시 표시 (1열) */
@media (max-width: 860px){
.has-dropdown > .dropdown{ display: none !important; }
.has-dropdown.open > .dropdown{ display: block !important; }
.has-dropdown.open > .dropdown.dropdown-cols{ display: block !important; }
}
/* (선택) 브랜드 텍스트 약간 키우기 – 로고 커졌을 때 밸런스 */
.brand-text{
display: inline-block;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
@media (max-width: 640px){
.brand-text{ font-size: 1rem; }
}
/* CEO 페이지 본문(인용문) 폰트 다운 & 간격 조정 */
.ceo-card blockquote{
max-width: 72ch; /* 가독 폭 제한 */
margin: 0 auto;
}
.ceo-card blockquote p{
font-size: clamp(.90rem, 1.6vw, .98rem); /* 데스크톱~모바일 자동 축소 */
line-height: 1.58;
margin: .28rem 0; /* 문단 간격 조금 더 촘촘하게 */
}
.ceo-card blockquote em{
font-style: normal; /* 기울임 제거(원하면 유지) */
font-weight: 700; /* 강조만 살짝 */
}
/* 더 작은 화면에서 한 번 더 줄이고 싶으면 */
@media (max-width: 480px){
.ceo-card blockquote p{ font-size: .90rem; line-height: 1.55; }
}
:root { --foot-logo: 28px; }
.foot-brand { display:flex; align-items:center; gap:8px; }
.foot-brand .logo{
width: var(--foot-logo);
height: var(--foot-logo);
border-radius: 6px;
overflow: hidden; /* 둥근 모서리 유지 */
}
.foot-brand .foot-logo{
width: 100%; height: 100%;
object-fit: contain; display:block;
}
@media (max-width: 420px){
:root { --foot-logo: 24px; }
}/* ================================
KINZELUBE — Footer (Clean 2-col)
Drop-in: put at the BOTTOM of site.css
================================ */
/* ---- Tokens ---- */
.site-footer{
--foot-font : 14px; /* 본문 글자 크기 */
--foot-line : 1.38; /* 본문 줄간격 */
--foot-gap : 6px; /* 단락 간격 */
--foot-logo : 20px; /* 로고 크기 */
background:#0b1220;
color:#e5e7eb;
padding:24px 0 18px; /* 상하 여백(공백 과다 방지) */
margin-top:28px; /* 본문과 간격 */
text-align:center; /* 전체 중앙 기준 */
}
/* ---- Grid: Desktop 2 columns (centered), Mobile 1 column ---- */
.site-footer .fgrid{
display:grid;
grid-template-columns: repeat(2, minmax(280px, 420px));
justify-content:center; /* 2개 칼럼 블록을 중앙에 */
column-gap:24px;
row-gap:10px;
align-items:start;
text-align:initial; /* 내부는 좌/우 정렬 가능 */
}
.site-footer .fgrid > div{ text-align:left; } /* 좌우 카드 내용은 왼쪽 정렬 */
/* ---- Brand (small logo) ---- */
.site-footer .foot-brand{
display:inline-flex; align-items:center; gap:8px;
margin-bottom:4px; font-weight:900; letter-spacing:-.02em;
}
.site-footer .foot-brand .logo{
width:var(--foot-logo); height:var(--foot-logo);
border-radius:6px; overflow:hidden; display:grid; place-items:center;
background:transparent;
}
.site-footer .foot-brand .logo img{ width:100%; height:100%; object-fit:contain; display:block; }
/* ---- Paragraphs (address / contact) ---- */
.site-footer .foot,
.site-footer address.foot{
font-size:var(--foot-font);
line-height:var(--foot-line);
margin:var(--foot-gap) 0;
color:#9ca3af;
}
.site-footer .foot strong{ font-weight:700; }
.site-footer .foot a{ color:#d1d9ff; text-decoration:underline; white-space:nowrap; }
/* ---- Contact line (TEL / FAX / E-mail / Mobile) : one row with separators ---- */
.site-footer .contact-line{
display:flex; flex-wrap:wrap; /* 좁아지면 자동 줄바꿈 */
align-items:center; gap:6px 18px; /* 행/열 간격 */
margin:var(--foot-gap) 0;
}
.site-footer .contact-line .item{ white-space:nowrap; }
.site-footer .contact-line .item:not(:last-child)::after{
content:"|"; display:inline-block; margin:0 6px 0 12px;
color:#94a3b8; opacity:.9;
}
/* ---- Bottom quick links: 회사소개 | 제품소개 | 자료요청 ---- */
.site-footer .foot-links{
grid-column:1 / -1; /* 두 칼럼 가로지르기 */
display:flex; justify-content:center; align-items:center;
gap:0; flex-wrap:wrap; text-align:center; margin-top:8px;
}
.site-footer .foot-links .foot{ margin:0; padding:0; display:flex; align-items:center; }
.site-footer .foot-links .foot:not(:first-child)::before{
content:"|"; color:#94a3b8; opacity:.85; margin:0 10px;
}
.site-footer .foot-links .foot a{ display:inline-block; padding:6px 8px; }
/* ---- Copyright ---- */
.site-footer .copyright{
margin-top:10px; color:#94a3b8; font-size:12px; padding:6px 0 8px; text-align:center;
}
/* ---- Responsive ---- */
@media (max-width:780px){
.site-footer .fgrid{ grid-template-columns:1fr; }
.site-footer .foot-links{ grid-column:auto; }
}
@media (max-width:420px){
.site-footer{ --foot-font:13px; --foot-gap:4px; }
.site-footer .foot-links .foot:not(:first-child)::before{ margin:0 8px; }
}
@media (max-width:360px){
.site-footer .foot, .site-footer address.foot{ font-size:.88rem; line-height:1.4; }
}
/* ================================
KINZELUBE — Purple theme overrides
(붙여넣기 위치: site.css 맨 아래)
================================ */
/* 1) 브랜드 컬러 토큰만 보라로 교체 */
:root{
--brand: #6350D6; /* 메인 퍼플 */
--ring: rgba(99,80,214,.22); /* 포커스/하이라이트 */
}
/* 2) Hero 오버레이도 보라색으로 (기존 burgundy rgba 덮어쓰기) */
.hero{
/* 오버레이에 쓸 RGB값(99,80,214 = #6350D6) */
--hero-rgb: 99,80,214;
}
/* 기존 .hero::before 를 덮어쓰는 규칙 */
.hero::before{
background-image:
linear-gradient(180deg,
rgba(var(--hero-rgb), var(--hero-tint)),
rgba(var(--hero-rgb), var(--hero-tint))
),
var(--hero-image);
}
/* 3) 히어로 보조 일러스트 박스 배경도 퍼플 톤 */
.hero-illust{
background:#3A2D93; /* 진한 퍼플 */
border:1px solid rgba(255,255,255,.15);
}
/* 5) 섭탭/액티브 테두리의 내부 그림자(버건디 값 → 퍼플 값 살짝 톤다운) */
.subtabs a.active,
.subtabs a[aria-current="page"]{
box-shadow: inset 0 0 0 2px rgba(99,80,214,.14);
}
/* 6) 인용 큰따옴표 등 burgundy 기반 장식 색감을 퍼플로 */
.ceo-card blockquote::before{
color: rgba(99,80,214,.18);
}