/* ============================================================
   MAKENOV — design system
   Mirrored from ohmycompany.com (2026-07-27 실측)
   Pretendard 16px / text #212529 / bg #fff
   primary mint #27CAA1 (btn r4) / accent blue #0097E0 + yellow #FCFC32
   section h3 22px/600 · card radius 16
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root{
  /* == ohmycompany 실측 토큰 == */
  --mk-primary:#27CAA1;            /* 메인 CTA 민트 */
  --mk-primary-dark:#1FAF8A;
  --mk-primary-soft:#E9FAF5;
  --mk-accent:#0097E0;             /* 포인트 블루 */
  /* 로고에서 직접 추출한 브랜드 색 (assets/img/logo.png 픽셀 분석) */
  --mk-navy:#022E7D;               /* 워드마크 네이비 */
  --mk-navy-deep:#04143F;          /* 다크 배경 */
  --mk-navy-lift:#0B45B4;          /* 그라데이션 밝은 쪽 */
  --mk-mint:#32D1B1;               /* 화살표 민트 */
  --mk-accent-soft:#E6F4FC;
  --mk-yellow:#FCFC32;             /* 띠배너 강조 텍스트 */
  --mk-ink:#212529;                /* 본문 텍스트 */
  --mk-body:#495057;
  --mk-muted:#868E96;
  --mk-line:#E9ECEF;
  --mk-line-strong:#DEE2E6;
  --mk-bg:#FFFFFF;
  --mk-bg-soft:#F8F9FA;
  --mk-surface:#FFFFFF;
  --mk-footer:#F8F9FA;
  --mk-footer-ink:#495057;
  --mk-danger:#E03131;
  --mk-success:#37B24D;
  --mk-lock:#F08C00;
  --r-sm:4px;                      /* 버튼 */
  --r-base:8px;
  --r-card:16px;                   /* 카드 */
  --r-pill:999px;
  --font-body:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-head:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  /* 컨테이너 폭 — addwel.co.kr 실측(고정 1400px, 1440·1920 뷰포트 동일)에 맞춰 넓혔다.
     이전 1140은 요즘 모니터에서 좌우가 과하게 비었다. */
  --maxw:1400px;
  /* 하위호환 별칭 */
  --mk-primary-variant:#1FAF8A;
  --mk-accent-variant:#33ABE6;
  --mk-shadow-muted:rgba(0,0,0,.08);
  --mk-shadow-soft:rgba(0,0,0,.05);
  --mk-header-bg:#FFFFFF;
  --mk-ok:#37B24D;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:16px;color:var(--mk-ink);background:var(--mk-bg);line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--mk-ink);font-weight:600;line-height:1.35}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 15px}
@media(max-width:640px){.wrap{padding:0 16px}}

/* ---------- buttons (실측: 민트 #27CAA1, r4, 14px) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:600;line-height:1;padding:12px 20px;border-radius:var(--r-sm);
  transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn-primary{background:var(--mk-primary);color:#fff}
.btn-primary:hover{background:var(--mk-primary-dark)}
.btn-ghost{background:#fff;color:var(--mk-body);border:1px solid var(--mk-line-strong)}
.btn-ghost:hover{border-color:var(--mk-ink);color:var(--mk-ink)}
.btn-soft{background:var(--mk-primary-soft);color:var(--mk-primary-dark)}
.btn-soft:hover{background:#D8F5EC}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-lg{padding:15px 30px;font-size:16px}

/* ---------- 상단 띠배너 (파랑 + 노랑 텍스트) ---------- */
.topbar{background:var(--mk-navy);color:#fff;font-size:15px;font-weight:600;position:relative}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;text-align:center}
.topbar b{color:var(--mk-yellow);font-weight:700}
.topbar .x{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:17px;color:rgba(255,255,255,.85)}
@media(max-width:640px){.topbar{font-size:13px}.topbar .wrap{height:42px;padding-right:38px}}

/* ---------- header ----------
   addwel.co.kr 실측 구조: 상단행 1400x80 (로고 · 알약 검색 420x48 r50 1px테두리 · 우측 아이콘묶음)
   + 그 아래 메뉴행. 우측 아이콘은 아이콘 위 / 라벨 아래 세로 배치.
   아이콘은 전부 인라인 SVG — 이모지는 쓰지 않는다. */
.mk-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--mk-line)}
.mk-head-top{display:flex;align-items:center;gap:32px;height:80px}
.mk-head-nav{display:flex;align-items:center;height:56px;border-top:1px solid var(--mk-line)}
/* 로고 — assets/img/logo.png 가 있으면 이미지, 없으면 텍스트로 자동 대체 */
.mk-logo{display:flex;align-items:center;font-family:var(--font-head);font-weight:800;font-size:23px;
  color:var(--mk-navy);letter-spacing:-.03em;flex-shrink:0}
.mk-logo img{height:30px;width:auto;display:block}
.mk-logo span{display:none}
.mk-logo.txt span{display:inline}
.mk-logo b{color:var(--mk-primary)}
@media(max-width:640px){.mk-logo img{height:24px}.mk-logo{font-size:19px}}
/* addwel 실측 — 좌측 주메뉴 18px/700, 우측 링크 15px/600. 둘 다 검정(회색이면 죽어 보인다). */
.mk-nav{display:flex;align-items:center;gap:30px;font-weight:700;font-size:18px;color:var(--mk-ink)}
.mk-nav a{padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.mk-nav a:hover{color:var(--mk-primary);border-bottom-color:var(--mk-primary)}
/* 메뉴행 우측 — 서비스 소개 / 이용 가이드 / 고객센터 (addwel gnb 위치) */
.mk-nav .gnb{margin-left:auto;display:flex;gap:26px}
.mk-nav .gnb a{font-size:15px;font-weight:600;color:var(--mk-ink)}
.mk-nav .gnb a:hover{color:var(--mk-primary);border-bottom-color:var(--mk-primary)}
/* 서비스 소개 — 바이어용 / 제조사용 드롭다운 */
.mk-nav .drop{position:relative;display:flex;align-items:center}
.mk-nav .drop > a::after{content:"";display:inline-block;vertical-align:middle;margin-left:6px;
  width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.mk-nav .drop:hover > a::after{transform:translateY(1px) rotate(225deg)}
.mk-nav .drop .menu{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  min-width:190px;background:#fff;border:1px solid var(--mk-line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);padding:6px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:210}
.mk-nav .drop:hover .menu,.mk-nav .drop:focus-within .menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mk-nav .drop .menu a{font-size:14px;font-weight:500;color:var(--mk-body);
  padding:10px 14px;border-radius:7px;border-bottom:0;white-space:nowrap}
.mk-nav .drop .menu a:hover{background:var(--mk-primary-soft);color:var(--mk-primary-dark);border-bottom:0}
@media(max-width:1180px){.mk-nav{gap:22px;font-size:17px}.mk-nav .gnb{gap:18px}}
.mk-head-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.mk-lang{display:flex;border:1px solid var(--mk-line-strong);border-radius:var(--r-sm);overflow:hidden;margin-right:8px}
.mk-lang button{padding:5px 9px;font-size:12px;font-weight:600;color:var(--mk-muted)}
.mk-lang button.on{background:var(--mk-ink);color:#fff}

/* 우측 유틸 — 아이콘 위, 라벨 아래 (addwel 구조) */
.mk-util{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-width:58px;padding:4px 6px;position:relative;color:var(--mk-body);border-radius:8px;transition:color .15s,background .15s}
.mk-util:hover{color:var(--mk-primary);background:var(--mk-primary-soft)}
.mk-util svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.mk-util .lb{font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.mk-util .badge{position:absolute;top:0;right:6px;background:var(--mk-primary);color:#fff;
  font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;padding:0 4px}
@media(max-width:860px){.mk-util .lb{display:none}.mk-util{min-width:38px;gap:0}}

/* 검색 — addwel 실측 420x48 / radius 50 / 1px 브랜드색 테두리 */
.mk-search{flex:1;max-width:460px;position:relative}
.mk-search input{width:100%;height:48px;border:1px solid var(--mk-primary);border-radius:var(--r-pill);
  padding:0 52px 0 24px;font-size:16px;font-family:var(--font-body);background:#fff;color:var(--mk-ink)}
.mk-search input::placeholder{color:var(--mk-muted)}
.mk-search input:focus{outline:none;border-color:var(--mk-primary-dark);box-shadow:0 0 0 3px var(--mk-primary-soft)}
.mk-search .ico{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  color:var(--mk-ink);background:none;border-radius:50%;cursor:pointer}
.mk-search .ico:hover{background:var(--mk-primary-soft);color:var(--mk-primary-dark)}
.mk-search .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}

/* 반응형 — .mk-nav 정의보다 뒤에 둬야 한다(같은 특정도라 순서로 이긴다) */
@media(max-width:1024px){.mk-search{display:none}}
@media(max-width:860px){
  .mk-head-top{height:62px;gap:14px}
  .mk-nav.mk-head-nav{display:none}
  .mk-lang{margin-right:2px}
  .mk-lang button{padding:4px 6px;font-size:11px}
}
/* 좁은 화면에선 좌우가 넘친다 — 푸터에도 있는 항목(언어·제조사 등록)을 접는다 */
@media(max-width:640px){
  .mk-head-right .mk-lang,
  .mk-head-right .mk-util.opt{display:none}
  .mk-head-right{gap:2px}
}

/* ---------- 히어로 배너 (omc 실측: 1110x400 풀블리드 + 오버레이) ---------- */
.omc-hero{padding:24px 0 0;margin-bottom:68px}
/* addwel 실측: 카테고리 레일 240 + gap 12 + 슬라이더 1148 = 1400 */
.hero-row{display:flex;gap:12px;align-items:stretch}
.omc-hero .frame{position:relative;flex:1;min-width:0;height:400px;
  overflow:hidden;border-radius:var(--r-card);background:var(--mk-bg-soft)}

/* 좌측 카테고리 레일 — 디렉토리 사이트라 상시 노출이 낫다(addwel은 드롭다운) */
.hero-cats{width:240px;flex-shrink:0;background:var(--mk-bg-soft);border-radius:var(--r-card);
  padding:10px 0;display:flex;flex-direction:column}
.hero-cats .all{display:flex;align-items:center;justify-content:space-between;
  padding:11px 20px 13px;font-size:14px;font-weight:700;color:var(--mk-primary-dark)}
.hero-cats .all svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-cats ul{list-style:none;flex:1;overflow:auto}
.hero-cats li a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 20px;font-size:14px;color:var(--mk-body);transition:color .15s,background .15s}
.hero-cats li a:hover{color:var(--mk-primary-dark);background:#fff}
.hero-cats li a .n{font-size:12px;color:var(--mk-muted);font-variant-numeric:tabular-nums}
.hero-cats li a:hover .n{color:var(--mk-primary)}

@media(max-width:1024px){.hero-cats{display:none}.omc-hero .frame{height:360px}}
@media(max-width:640px){.omc-hero .frame{height:300px}}
.omc-hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.omc-hero .slide.on{opacity:1;pointer-events:auto}
.omc-hero .shot{position:absolute;inset:0;display:block}
.omc-hero .shot img{width:100%;height:100%;object-fit:cover}
/* 배경 아트가 이미 어두우므로 베일은 하단 가독성 확보용으로만 (그래픽이 죽지 않게) */
.omc-hero .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,12,18,.82) 0%,rgba(4,12,18,.42) 38%,rgba(4,12,18,0) 74%)}
.omc-hero .copy{position:absolute;left:40px;right:40px;bottom:40px;z-index:2;pointer-events:none}
.omc-hero .copy h1,.omc-hero .copy h2{font-size:32px;font-weight:700;line-height:1.34;letter-spacing:-.02em;
  color:#fff;margin-bottom:10px;max-width:660px}
.omc-hero .copy p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.86);max-width:600px}
/* 히어로 CTA — copy 블록 안, pointer-events 복구 */
.omc-hero .hero-cta{display:flex;gap:10px;margin-top:20px;pointer-events:auto}
.omc-hero .hero-cta .btn{height:46px;padding:0 26px;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;border-radius:var(--r-sm)}
.omc-hero .hero-cta .ghost{background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.omc-hero .hero-cta .ghost:hover{background:rgba(255,255,255,.24)}
/* 배경 아트는 SVG — object-fit로 프레임에 맞춤 */
.omc-hero .shot img{background:var(--mk-navy-deep)}
.omc-hero .dots{position:absolute;right:40px;bottom:76px;display:flex;gap:7px;z-index:3}
.omc-hero .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
  cursor:pointer;transition:all .2s}
.omc-hero .dots i.on{background:#fff;width:22px;border-radius:100px}
/* 이전·다음 — addwel 처럼 우하단. 점만 있으면 4장 중 어디인지는 알아도 넘기기가 번거롭다. */
.omc-hero .hero-arrows{position:absolute;right:40px;bottom:30px;display:flex;gap:6px;z-index:3}
.omc-hero .hero-arrows button{width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.32);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .15s}
.omc-hero .hero-arrows button:hover{background:rgba(0,0,0,.55)}
.omc-hero .hero-arrows svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){
  .omc-hero{padding:16px 0 0;margin-bottom:44px}
  .omc-hero .frame{height:340px}
  .omc-hero .hero-arrows{display:none}
  .omc-hero .dots{bottom:26px}
  .omc-hero .copy{left:20px;right:20px;bottom:24px}
  .omc-hero .copy h1,.omc-hero .copy h2{font-size:21px;margin-bottom:8px}
  .omc-hero .copy p{font-size:13px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .omc-hero .hero-cta{margin-top:14px}
  .omc-hero .hero-cta .btn{height:40px;padding:0 18px;font-size:14px}
  .omc-hero .dots{right:20px;bottom:26px}
}

/* ---------- sections ---------- */
.sec{padding:0;margin-bottom:68px}
.sec-soft{background:transparent}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:14px;flex-wrap:wrap;padding-left:2px}
.sec-head h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.sec-head .more{font-size:14px;font-weight:500;color:var(--mk-muted)}
.sec-head .more:hover{color:var(--mk-ink)}

/* 섹션 서브탭 (후원형/증권형 스타일) */
.subtabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.subtabs button{padding:4px 0;font-size:14px;font-weight:500;color:var(--mk-muted);
  background:transparent;border:0;margin-left:18px}
.subtabs button:hover{color:var(--mk-ink)}
.subtabs button.on{color:var(--mk-ink);font-weight:700}

/* ---------- category rail ---------- */
.cat-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat-card{background:var(--mk-bg-soft);border-radius:var(--r-card);padding:22px 14px;text-align:center;transition:background .15s}
.cat-card:hover{background:var(--mk-primary-soft)}
.cat-card .ico{font-size:28px;margin-bottom:9px}
.cat-card b{display:block;color:var(--mk-ink);font-size:14px;font-weight:600}
.cat-card span{font-size:12px;color:var(--mk-muted)}
@media(max-width:860px){.cat-rail{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.cat-rail{grid-template-columns:repeat(2,1fr)}}

/* ---------- 제품 카드 (omc 펀딩 카드 문법) ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
@media(max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}
.p-card{background:transparent;border-radius:4px;display:flex;flex-direction:column;position:relative}
.p-card .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-card);background:var(--mk-bg-soft)}
.p-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.p-card:hover .thumb img{transform:scale(1.05)}
.p-card .flag{position:absolute;top:12px;left:12px;z-index:2;background:var(--mk-primary);color:#fff;
  font-size:12px;font-weight:600;padding:0 9px;height:24px;line-height:24px;border-radius:4px}
.p-card .body{padding:12px 0 0;display:flex;flex-direction:column;flex:1}
.p-card .brand{font-size:12px;font-weight:400;line-height:18px;color:#6C757D}
.p-card h3{font-size:16px;font-weight:400;line-height:19.2px;color:var(--mk-ink);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38.4px}
.p-card .meta{display:flex;align-items:baseline;margin-top:10px}
.p-card .meta .rate{font-size:18px;font-weight:500;line-height:27px;color:var(--mk-primary)}
.p-card .meta .amt{font-size:14px;font-weight:300;line-height:21px;color:var(--mk-ink);margin-left:8px}
.p-card .meta .left{margin-left:auto;font-size:12px;font-weight:400;line-height:12px;color:#808284;align-self:center}
.p-card .heart{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.94);
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--mk-ink);box-shadow:0 1px 5px rgba(0,0,0,.12)}
.p-card .heart.on{color:var(--mk-danger)}

/* ---------- 신규 등록 (텍스트 리스트형) ---------- */
.new-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
@media(max-width:860px){.new-list{grid-template-columns:1fr}}
.new-item{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--mk-line);
  border-radius:var(--r-card);padding:14px 16px;transition:border-color .15s}
.new-item:hover{border-color:var(--mk-primary)}
.new-item img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-base);flex-shrink:0}
.new-item .tx{min-width:0}
.new-item .tx b{display:block;font-size:14px;font-weight:500;color:var(--mk-ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.new-item .tx span{font-size:12px;color:var(--mk-muted)}

/* ---------- 오픈예정 (N명 관심) ---------- */
.soon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1024px){.soon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.soon-grid{grid-template-columns:1fr}}
.soon-card .thumb{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--mk-bg-soft)}
.soon-card .thumb img{width:100%;height:100%;object-fit:cover}
.soon-card .brand{font-size:13px;color:var(--mk-muted);margin-top:13px}
.soon-card h3{font-size:15px;font-weight:500;line-height:1.5;margin:3px 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soon-card .cnt{font-size:14px;font-weight:600;color:var(--mk-primary)}

/* ---------- 새 소식 (칼럼 리스트) ---------- */
/* 홈 '새로운 소식' — 칼럼 목록 페이지와 같은 카드(.col-card)를 3열로 쓴다.
   제목만 나열하던 2열 텍스트 리스트는 썸네일이 없어 허전했다. */
.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:960px){.news-list{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:640px){.news-list{grid-template-columns:1fr}}
.more-btn{display:block;width:100%;text-align:center;border:1px solid var(--mk-line-strong);
  border-radius:var(--r-sm);padding:14px;font-size:14px;font-weight:600;color:var(--mk-body);margin-top:26px}
.more-btn:hover{border-color:var(--mk-ink);color:var(--mk-ink)}

/* ---------- 칼럼 카드 (칼럼 목록 페이지) ---------- */
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:860px){.col-grid{grid-template-columns:1fr}}
.col-card{background:#fff}
.col-card .thumb{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-card)}
.col-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.col-card:hover .thumb img{transform:scale(1.04)}
.col-card .body{padding:14px 2px 0}
.col-card .cat{display:inline-block;background:var(--mk-primary-soft);color:var(--mk-primary-dark);
  border-radius:4px;font-size:12px;font-weight:600;padding:0 9px;height:24px;line-height:24px}
.col-card h3{font-size:17px;font-weight:600;margin:10px 0 7px;line-height:1.45}
.col-card p{font-size:14px;color:var(--mk-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-card .date{font-size:13px;color:var(--mk-muted);margin-top:10px}

/* ---------- 파트너 / 기획전 타일 ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:860px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
.partner{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--mk-bg-soft)}
.partner img{width:100%;height:100%;object-fit:cover}
.partner .st{position:absolute;top:12px;left:12px;background:var(--mk-primary);color:#fff;
  font-size:12px;font-weight:600;padding:0 9px;height:24px;line-height:24px;border-radius:4px}
.partner .nm{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 13px;color:#fff;font-size:14px;font-weight:600;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}

/* ---------- 중간 프로모 배너 (바이어 인증 유도) ----------
   연민트 박스가 밋밋해서 브랜드 그라데이션 밴드로 다시 디자인.
   우측 장식 = 인증 네트워크 느낌의 동심원+노드 SVG. */
.promo{position:relative;overflow:hidden;border-radius:var(--r-card);padding:48px 52px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:linear-gradient(115deg,var(--mk-primary-dark) 0%,var(--mk-primary) 55%,#3AD8B4 100%)}
.promo .pr-art{position:absolute;right:-20px;top:50%;transform:translateY(-50%);height:130%;pointer-events:none}
.promo .pr-tx{position:relative;z-index:1;max-width:640px}
.promo h2{font-size:27px;font-weight:800;line-height:1.35;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.promo p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.88)}
.pr-feats{list-style:none;display:flex;gap:8px 26px;flex-wrap:wrap;margin-top:18px}
.pr-feats li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff}
.pr-feats svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
  background:rgba(255,255,255,.18);border-radius:50%;padding:3px;box-sizing:content-box}
.promo .pr-cta{position:relative;z-index:1;flex-shrink:0}
.pr-btn{background:#fff;color:var(--mk-primary-dark);font-size:16px;font-weight:700;
  height:54px;padding:0 34px;border-radius:var(--r-sm);box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .18s,box-shadow .18s}
.pr-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.16)}
@media(max-width:860px){
  .promo{padding:34px 26px}
  .promo h2{font-size:22px}
  .promo .pr-art{display:none}
  .pr-feats{flex-direction:column;gap:8px}
}
.banner{background:var(--mk-primary-soft);padding:0;margin:52px 0}
.banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:38px;padding-bottom:38px}
.banner h2{font-size:23px;font-weight:700;color:var(--mk-ink)}
.banner p{font-size:15px;color:var(--mk-body);margin-top:6px}
.banner .btn{background:var(--mk-primary);color:#fff}
.banner .btn:hover{background:var(--mk-primary-dark)}
.banner-dark{background:var(--mk-ink)}
.banner-dark h2{color:#fff}
.banner-dark p{color:#CED4DA}

/* ---------- 공지사항 ---------- */
/* ---------- 홈 하단 제조사 CTA (단독 풀폭) ----------
   원래 공지사항과 2열로 붙어 있어 작고 눈에 안 띄었다.
   공지 제거 후 한 칸을 다 쓰는 밴드로 키웠다.
   중간 프로모 배너(.promo)가 민트 소프트라, 여기는 네이비로 대비를 준다.
   ⚠️ style.css:55의 h1~h4 color 규칙이 상속을 이기므로 제목에 color를 명시해야 한다. */
.maker-band{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:linear-gradient(110deg,var(--mk-navy-deep) 0%,var(--mk-navy) 62%,var(--mk-navy-lift) 100%);
  border-radius:var(--r-card);padding:52px 52px;position:relative;overflow:hidden}
.maker-band::after{content:'';position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(50,209,177,.28),transparent 68%);pointer-events:none}
/* 좌하단 동심원 링 — 히어로 SVG 아트와 같은 계열의 장식 */
.maker-band::before{content:'';position:absolute;left:-70px;bottom:-110px;width:280px;height:280px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at center,transparent 54%,rgba(50,209,177,.14) 55%,transparent 57%,
    transparent 70%,rgba(50,209,177,.1) 71%,transparent 73%,
    transparent 86%,rgba(50,209,177,.08) 87%,transparent 89%)}
.mb-feats{list-style:none;display:flex;gap:8px 26px;flex-wrap:wrap;margin-top:18px}
.mb-feats li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
.mb-feats svg{width:16px;height:16px;stroke:var(--mk-mint);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
  background:rgba(50,209,177,.16);border-radius:50%;padding:3px;box-sizing:content-box}
@media(max-width:860px){.mb-feats{flex-direction:column;gap:8px}}
.maker-band .tx{position:relative;z-index:1;max-width:640px}
.maker-band h2{color:#fff;font-size:28px;font-weight:700;line-height:1.35;margin-bottom:10px}
.maker-band p{color:rgba(255,255,255,.78);font-size:15px;line-height:1.65}
.maker-band .go{position:relative;z-index:1;flex-shrink:0;background:var(--mk-primary);color:#fff;
  font-size:15px;font-weight:600;padding:0 30px;height:52px;line-height:52px;border-radius:var(--r-sm);
  transition:background .2s,transform .2s}
.maker-band:hover .go{background:var(--mk-mint);transform:translateX(3px)}
@media(max-width:860px){
  .maker-band{padding:36px 26px;gap:22px}
  .maker-band h2{font-size:22px}
  .maker-band .go{width:100%;text-align:center}
}

/* ---------- directory ---------- */
.dir-top{padding:38px 0 6px}
.dir-top h1{font-size:26px;font-weight:700;margin-bottom:6px}
.dir-top p{color:var(--mk-body);font-size:15px}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:20px 0;position:sticky;top:137px;background:#fff;z-index:50;border-bottom:1px solid var(--mk-line)}
@media(max-width:860px){.filterbar{top:60px}}
.chip{padding:9px 2px;background:transparent;border:0;border-bottom:2px solid transparent;
  font-size:15px;font-weight:500;color:var(--mk-muted);margin-right:22px;transition:color .15s}
.chip:hover{color:var(--mk-ink)}
.chip.on{color:var(--mk-ink);font-weight:700;border-bottom-color:var(--mk-ink)}
.sortsel{margin-left:auto;border:1px solid var(--mk-line-strong);border-radius:var(--r-sm);
  padding:9px 12px;font-size:14px;font-family:var(--font-body);color:var(--mk-ink);background:#fff}

/* ---------- 제품 상세 (wadiz 실측: 본문740 + 사이드478 gap48 / 섹션간격80) ----------
   컨테이너만 사이트 공통 폭(1400)으로 맞추고, 사이드는 실측값 478 그대로 둔다.
   본문은 남는 폭을 먹어 상세 이미지가 더 크게 나온다. */
.pd-wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.pd-row{display:flex;gap:48px;align-items:flex-start;padding:32px 0 72px}
.pd-main{min-width:0;flex:1}
/* 헤더가 2행(80+52)이 되면서 sticky 오프셋도 같이 내렸다 */
.pd-side{width:478px;flex-shrink:0;position:sticky;top:154px}
@media(max-width:1240px){.pd-row{gap:32px}.pd-side{width:380px}}
@media(max-width:960px){.pd-row{flex-direction:column;gap:28px;padding:20px 0 48px}
  .pd-main,.pd-side{width:100%;position:static}}

/* 갤러리 740x416 (16:9) */
.pd-gallery{position:relative;border-radius:8px;overflow:hidden;background:var(--mk-bg-soft)}
.pd-gallery .main{aspect-ratio:16/9;overflow:hidden}
.pd-gallery .main img{width:100%;height:100%;object-fit:cover}
.pd-gallery .cnt{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(0,0,0,.5);
  color:#fff;font-size:12px;font-weight:400;padding:0 11px;height:26px;line-height:26px;border-radius:100px}
.pd-thumbs{display:flex;gap:8px;margin-top:10px}
.pd-thumbs img{width:76px;height:43px;object-fit:cover;border-radius:4px;cursor:pointer;
  opacity:.5;border:2px solid transparent;transition:all .15s}
.pd-thumbs img.on{opacity:1;border-color:var(--mk-primary)}

/* 본문 섹션 간격 80 */
.pd-main .pd-sec{padding:0;margin-top:80px;border:0}
.pd-main .pd-sec:first-child{margin-top:40px}
.pd-sec h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:20px}

/* 상세 이미지·문단 (740 폭 세로 나열) */
.pd-body{font-size:16px;line-height:1.85;color:var(--mk-body)}
.pd-body p{margin-bottom:26px}
.pd-body img{width:100%;display:block;margin:0 0 26px;border-radius:8px}
/* 분할 업로드된 상세페이지 — 조각을 틈 없이 이어 붙여 한 장처럼 보이게 */
.pd-strip{margin:0 0 26px;border-radius:8px;overflow:hidden;font-size:0;line-height:0}
.pd-strip img{width:100%;height:auto;display:block;margin:0;border-radius:0}
.pd-video{width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;margin:0 0 26px;background:#000}
.pd-video iframe{width:100%;height:100%;border:0;display:block}

/* 사이드 구매박스 */
.pd-side .box{border:1px solid var(--mk-line);border-radius:8px;padding:26px 24px;background:#fff}
.pd-side .brand{font-size:13px;font-weight:600;color:var(--mk-primary)}
.pd-side h1{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.02em;margin:8px 0 12px}
.pd-side .tagline{font-size:15px;color:var(--mk-body);line-height:1.65;margin-bottom:20px}
.pd-side .stat{display:flex;gap:26px;padding:18px 0;border-top:1px solid var(--mk-line);
  border-bottom:1px solid var(--mk-line);margin-bottom:18px}
.pd-side .stat b{display:block;font-size:20px;font-weight:700;color:var(--mk-primary);line-height:1.2}
.pd-side .stat span{font-size:12px;color:var(--mk-muted);margin-top:4px;display:block}
.lockbox{background:var(--mk-bg-soft);border-radius:8px;padding:16px 18px;margin-bottom:18px}
.lockrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:15px;gap:12px}
.lockrow+.lockrow{border-top:1px solid var(--mk-line)}
.lockrow .lbl{color:var(--mk-muted);font-size:14px;flex-shrink:0;margin-right:auto}
.lockval{filter:blur(6px);user-select:none;font-weight:600;color:var(--mk-ink);text-align:right}
.lockval.open{filter:none}
.nego{flex-shrink:0;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;
  padding:5px 9px;border-radius:999px;background:var(--mk-accent-soft);color:var(--mk-accent);
  border:1px solid color-mix(in srgb, var(--mk-accent) 22%, transparent)}
.locknote{font-size:13px;color:var(--mk-lock);font-weight:600;margin-top:10px}
.pd-ctas{display:flex;flex-direction:column;gap:9px}
.pd-ctas .btn{padding:15px 20px;font-size:15px}

/* 회사 인라인 카드 */
.co-inline{display:flex;align-items:center;gap:14px;background:var(--mk-bg-soft);
  border-radius:8px;padding:16px 18px;margin-top:18px;transition:background .15s}
.co-inline:hover{background:var(--mk-primary-soft)}
.co-inline img{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff}
.co-inline .tx{min-width:0;flex:1}
.co-inline .nm{font-size:15px;font-weight:700;color:var(--mk-ink)}
.co-inline .sub{font-size:13px;color:var(--mk-muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-inline .go{font-size:13px;font-weight:600;color:var(--mk-primary);white-space:nowrap}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(33,37,41,.55);z-index:500;display:none;
  align-items:center;justify-content:center;padding:20px}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:var(--r-card);width:100%;max-width:460px;max-height:92vh;
  overflow-y:auto;padding:32px 30px 26px;position:relative;box-shadow:0 12px 44px rgba(0,0,0,.18)}
.modal .x{position:absolute;top:14px;right:16px;font-size:20px;color:var(--mk-muted)}
.modal h2{font-size:21px;font-weight:700;margin-bottom:6px}
.modal .sub{font-size:14px;color:var(--mk-muted);margin-bottom:20px}
.f-row{margin-bottom:14px}
.f-row label{display:block;font-size:14px;font-weight:600;color:var(--mk-ink);margin-bottom:6px}
.f-row input,.f-row select,.f-row textarea{width:100%;border:1px solid var(--mk-line-strong);border-radius:var(--r-sm);
  padding:12px 13px;font-size:15px;font-family:var(--font-body);background:#fff;color:var(--mk-ink)}
.f-row input:focus,.f-row textarea:focus,.f-row select:focus{outline:none;border-color:var(--mk-primary);
  box-shadow:0 0 0 3px var(--mk-primary-soft)}
.f-row input[readonly]{background:var(--mk-bg-soft);color:var(--mk-body)}
.f-hint{font-size:13px;color:var(--mk-muted);margin-top:5px;line-height:1.5}
.mst-result{border:1px solid var(--mk-success);border-radius:var(--r-base);background:#EBFBEE;
  padding:13px 15px;font-size:14px;margin-bottom:14px;display:none;line-height:1.6}
.mst-result.err{border-color:var(--mk-danger);background:#FFF5F5}
.mst-result b{color:var(--mk-ink)}
.mst-row{display:flex;gap:8px}
.mst-row input{flex:1}
.steps{display:flex;gap:6px;margin-bottom:20px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--mk-line)}
.steps i.on{background:var(--mk-primary)}
.switch-auth{text-align:center;font-size:14px;margin-top:16px;color:var(--mk-muted)}
.switch-auth a{color:var(--mk-primary);font-weight:600;cursor:pointer}

/* ---------- mypage / lists ---------- */
/* 서브페이지 공통 히어로 — .dir-top 과 동일 규격으로 통일 */
.page-head{padding:38px 0 6px}
.page-head h1{font-size:26px;font-weight:700;margin-bottom:6px}
.page-head p{color:var(--mk-body);font-size:15px}
.soon-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--mk-primary);
  background:var(--mk-primary-soft);border-radius:var(--r-sm);padding:6px 12px}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--mk-line);margin:20px 0 26px}
.tabs button{display:flex;align-items:center;gap:6px;padding:12px 0;font-size:16px;font-weight:600;
  color:var(--mk-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--mk-ink);border-bottom-color:var(--mk-ink)}
/* 클릭 후 브라우저 기본 포커스 테두리가 검은 네모로 남던 것 차단 (키보드 이동은 유지) */
.tabs button:focus{outline:none}
.tabs button:focus-visible{outline:2px solid var(--mk-primary);outline-offset:3px;border-radius:4px}
.tabs .cnt{font-style:normal;font-size:12px;font-weight:700;color:var(--mk-primary-dark);
  background:var(--mk-primary-soft);border-radius:var(--r-pill);padding:0 7px;line-height:19px;min-height:19px}
.tabs .cnt:empty{display:none}

.list-item{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--mk-line);
  border-radius:var(--r-card);padding:16px;margin-bottom:12px;transition:border-color .15s}
.list-item:hover{border-color:var(--mk-line-strong)}
.list-item img{width:104px;height:78px;object-fit:cover;border-radius:var(--r-base);flex-shrink:0}
.list-item .grow{flex:1;min-width:0}
.list-item h3{font-size:16px;font-weight:600;line-height:1.4}
.list-item a:hover h3{color:var(--mk-primary-dark)}
.list-item .sub{font-size:13px;color:var(--mk-muted);margin-top:4px}
.list-item .acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* 삭제 ✕ — 테두리 있는 버튼으로 두면 빈 네모처럼 보여서 아이콘만 남긴다 */
.icon-x{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--mk-muted);transition:background .15s,color .15s;flex-shrink:0}
.icon-x:hover{background:var(--mk-bg-soft);color:var(--mk-danger)}
.icon-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* 내 문의 — 클릭하면 펼쳐져 전문·시각 표시 */
.inq-row{cursor:pointer}
.inq-row .dt-full{display:none}
.inq-row.open .dt-d{display:none}
.inq-row.open .dt-full{display:inline}
.inq-row.open .inq-msg{-webkit-line-clamp:unset;display:block}
.inq-row .chev{width:18px;height:18px;stroke:var(--mk-muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.inq-row.open .chev{transform:rotate(180deg)}
.list-item .inq-msg{margin-top:8px;font-size:14px;color:var(--mk-body);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){
  .list-item{flex-wrap:wrap}
  .list-item img{width:72px;height:54px}
  .list-item .acts{width:100%;justify-content:flex-end}
}
.empty{text-align:center;color:var(--mk-muted);padding:66px 0;background:var(--mk-bg-soft);border-radius:var(--r-card)}
.empty p{font-size:15px}

/* ---------- 마이페이지 ---------- */
.my-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:38px 0 4px}
.my-id h1{font-size:26px;font-weight:700;line-height:1.35}
.my-meta{font-size:14px;color:var(--mk-muted);margin-top:6px}
.my-badges{display:flex;gap:6px;margin-top:12px}
.badge-vip{display:inline-flex;align-items:center;background:var(--mk-navy);color:#fff;
  border-radius:4px;font-size:12px;font-weight:700;padding:0 9px;height:24px;line-height:24px}
.my-acts{display:flex;gap:8px;flex-shrink:0;padding-top:8px}
.bulkbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-bottom:14px}
.bulkbar .note{font-size:13px;color:var(--mk-muted)}
.unset{color:var(--mk-muted)}

/* 문의 상태 */
.list-item .st{font-size:12px;font-weight:700;padding:0 10px;height:26px;line-height:26px;border-radius:4px;white-space:nowrap}
.st-new{background:var(--mk-accent-soft);color:#0B6FA4}
.st-work{background:#FFF4E0;color:#B7791F}
.st-done{background:var(--mk-primary-soft);color:var(--mk-primary-dark)}

/* 프로필 2열 */
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.pf-grid{grid-template-columns:1fr}}
.pf-box{background:var(--mk-bg-soft);border-radius:var(--r-card);padding:26px 28px}
.pf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.pf-box h3{font-size:16px;font-weight:700;color:var(--mk-ink);margin-bottom:6px}
.pf-head h3{margin-bottom:0}
.pf-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--mk-line);font-size:15px}
.pf-row:last-of-type{border-bottom:0}
.pf-row b{min-width:132px;flex-shrink:0;color:var(--mk-muted);font-weight:500;font-size:14px}
.pf-row span{color:var(--mk-ink);word-break:break-all}
.pf-note{margin-top:12px;font-size:13px;color:var(--mk-muted);line-height:1.6}

/* ---------- footer (밝은 회색) ---------- */
.mk-footer{background:var(--mk-footer);color:var(--mk-footer-ink);margin-top:64px;border-top:1px solid var(--mk-line)}
.mk-footer .wrap{padding:42px 20px 26px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.mk-footer h4{color:var(--mk-ink);font-size:14px;font-weight:700;margin-bottom:12px}
.mk-footer a{display:block;font-size:14px;padding:4px 0;color:var(--mk-body)}
.mk-footer a:hover{color:var(--mk-primary)}
.mk-footer .logo{font-family:var(--font-head);font-size:21px;font-weight:800;color:var(--mk-navy);letter-spacing:-.03em}
.mk-footer .logo img{height:28px;width:auto;display:block}
.mk-footer .logo span{display:none}
.mk-footer .logo.txt span{display:inline}
.mk-footer .logo b{color:var(--mk-primary)}
.mk-footer .desc{font-size:13px;margin-top:11px;max-width:300px;color:var(--mk-muted);line-height:1.7}
.mk-footer .social{display:flex;gap:8px;margin-top:14px}
.mk-footer .social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--mk-line-strong);color:var(--mk-muted);font-size:14px;font-weight:700;padding:0}
.mk-footer .social a:hover{border-color:var(--mk-primary);color:var(--mk-primary)}
.mk-footer .base{border-top:1px solid var(--mk-line);padding:16px 20px;font-size:12px;
  text-align:center;color:var(--mk-muted);line-height:1.7}
@media(max-width:860px){.mk-footer .wrap{grid-template-columns:1fr 1fr}}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--mk-ink);color:#fff;border-radius:var(--r-base);padding:13px 22px;font-size:14px;
  font-weight:500;z-index:900;transition:transform .25s;white-space:nowrap;box-shadow:0 6px 22px rgba(0,0,0,.2)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- misc ---------- */
.badge-verified{display:inline-flex;align-items:center;background:var(--mk-primary-soft);color:var(--mk-primary-dark);
  border-radius:4px;font-size:12px;font-weight:600;padding:0 9px;height:24px;line-height:24px}
.section-note{font-size:13px;color:var(--mk-muted)}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tagcloud a{display:inline-flex;align-items:center;gap:5px;background:var(--mk-bg-soft);color:var(--mk-body);
  border-radius:4px;font-size:13px;font-weight:500;padding:7px 13px;transition:all .15s}
.tagcloud a b{color:var(--mk-muted);font-weight:600}
.tagcloud a:hover{background:var(--mk-primary);color:#fff}
.tagcloud a:hover b{color:rgba(255,255,255,.8)}
.skeleton{background:linear-gradient(90deg,#F1F3F5 25%,#E9ECEF 50%,#F1F3F5 75%);
  background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

/* ============================================================
   칼럼 (dfirst-incheon 블로그 레이아웃 실측 미러)
   카드 r16 · bg #F7F8FA · 2열 gap 32/24 · 이미지 16:9
   본문 780px · p 17px/1.85 #333 · h1 38/800 · h2 28/800
   ============================================================ */
:root{ --col-card-bg:#F7F8FA; --col-ink:#111111; --col-body-ink:#333333; --col-meta:#8A8A8A; }

/* ---------- 목록 히어로 ---------- */
/* .blog-hero 는 .dir-top 으로 통일하면서 제거됨 (2026-07-28) */

/* ---------- 2단 레이아웃: 사이드바 220 + 목록 937, gap 60 ---------- */
/* 사이드바 + 본문. 본문은 남는 폭을 채운다 — 고정 937이면 컨테이너를 1400으로 넓힌 뒤 오른쪽이 빈다.
   상세 본문 자체는 .blog-body 에서 780으로 다시 좁히므로 가독성은 그대로다. */
.blog-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:60px;align-items:start}
@media(max-width:1100px){.blog-layout{grid-template-columns:190px minmax(0,1fr);gap:34px}}
@media(max-width:860px){.blog-layout{grid-template-columns:1fr;gap:26px}}

/* 사이드바 */
.blog-sidebar{position:sticky;top:96px}
@media(max-width:860px){.blog-sidebar{position:static}}
.blog-search{position:relative;margin-bottom:34px}
.blog-search input{width:100%;height:46px;border:1px solid var(--mk-line-strong);border-radius:4px;
  padding:0 42px 0 18px;font-size:14px;font-family:var(--font-body);background:#fff;color:var(--col-ink)}
.blog-search input:focus{outline:none;border-color:var(--mk-primary)}
.blog-search .ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--col-meta);font-size:15px;pointer-events:none}
.blog-sidebar-tit{font-size:22px;font-weight:800;color:var(--col-ink);letter-spacing:-.03em;
  padding-bottom:16px;border-bottom:1px solid #E3E5E8;margin-bottom:20px}
.blog-cat-list{list-style:none}
.blog-cat-item{position:relative}
.blog-cat-link{display:flex;align-items:center;gap:6px;padding:14px 4px;font-size:15px;
  font-weight:500;color:#767676;cursor:pointer;transition:color .15s}
.blog-cat-link:hover{color:var(--col-ink)}
.blog-cat-item.is-active .blog-cat-link{font-weight:700;color:var(--col-ink);padding-left:16px}
.blog-cat-item.is-active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--mk-primary)}
.blog-cat-count{color:var(--col-meta);font-weight:500}
.blog-cat-item.is-active .blog-cat-count{color:var(--col-meta)}

/* 목록 그리드 */
.blog-main{min-width:0}
.blog-list{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
@media(max-width:640px){.blog-list{grid-template-columns:1fr;gap:20px}}
.blog-item-link{display:block;background:var(--col-card-bg);border-radius:var(--r-card);overflow:hidden;
  transition:transform .2s,box-shadow .2s}
.blog-item-link:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.08)}

/* 커버 — 일러스트를 그대로 보여주고 뱃지·브랜드만 얹는다.
   제목은 카드 아래(.blog-item-tit)에 이미 있으므로 커버에 또 쓰지 않는다. */
.blog-item-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0B2050}
.blog-item-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-item-link:hover .blog-item-img img{transform:scale(1.05)}
/* 뱃지·브랜드 글자가 뜨도록 위아래에만 얇게 깐다 */
.blog-item-img .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,20,63,.34) 0%,rgba(4,20,63,0) 34%,
                              rgba(4,20,63,0) 66%,rgba(4,20,63,.34) 100%)}
.blog-item-img .on-cover{position:absolute;inset:0;padding:20px 22px;display:flex;flex-direction:column}
.blog-item-img .badge{align-self:flex-start;background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.38);border-radius:var(--r-pill);
  font-size:11px;font-weight:700;padding:5px 12px;backdrop-filter:blur(2px)}
.blog-item-img .brand{margin-top:auto;font-size:11px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.72)}

/* 카드 하단 정보 */
.blog-item-info{padding:28px 28px 24px}
.blog-item-cat{font-size:14px;font-weight:600;color:var(--mk-primary)}
.blog-item-tit{font-size:19px;font-weight:700;color:var(--col-ink);line-height:1.5;margin:10px 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-item-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--col-meta)}
.blog-item-meta i{width:3px;height:3px;border-radius:50%;background:var(--col-meta);display:inline-block}
.blog-empty{grid-column:1/-1;text-align:center;color:var(--col-meta);padding:70px 0;font-size:15px}

/* 하단 플로팅 CTA 필 */
.blog-float{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:180;
  background:#fff;border-radius:var(--r-pill);box-shadow:0 6px 26px rgba(0,0,0,.16);
  display:flex;align-items:center;gap:9px;padding:15px 28px;font-size:15px;font-weight:600;
  color:var(--col-ink);white-space:nowrap;transition:transform .18s}
.blog-float:hover{transform:translateX(-50%) translateY(-2px)}
@media(max-width:640px){.blog-float{font-size:13px;padding:13px 20px;left:16px;right:16px;transform:none;justify-content:center}
  .blog-float:hover{transform:translateY(-2px)}}

/* ---------- 상세: 읽기 진행바 ---------- */
.blog-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:300}
.blog-progress-bar{height:100%;width:0;background:var(--mk-primary);transition:width .1s linear}

/* ---------- 상세 ---------- */
.blog-single{max-width:780px;margin:0 auto;padding:44px 0 60px}
.blog-breadcrumb{font-size:14px;color:var(--col-meta);margin-bottom:28px}
.blog-breadcrumb a:hover{color:var(--mk-primary)}
.blog-single-cat{display:inline-block;font-size:13px;font-weight:600;color:var(--mk-primary);
  background:var(--mk-primary-soft);border-radius:var(--r-sm);padding:5px 11px}
.blog-single h1{font-size:38px;font-weight:800;color:var(--col-ink);line-height:1.38;
  letter-spacing:-.03em;margin:16px 0 18px}
.blog-single-meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--col-meta);
  padding-bottom:28px;border-bottom:1px solid var(--mk-line)}
.blog-single-meta i{width:3px;height:3px;border-radius:50%;background:var(--col-meta);display:inline-block}
.blog-cover{margin:32px 0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;background:#E9ECEF}
.blog-cover img{width:100%;height:100%;object-fit:cover}
.blog-body{font-size:17px;line-height:1.85;color:var(--col-body-ink)}
.blog-body p{margin-bottom:26px}
.blog-body h2{font-size:28px;font-weight:800;color:var(--col-ink);line-height:1.45;margin:46px 0 18px;letter-spacing:-.02em}
.blog-body h3{font-size:21px;font-weight:700;color:var(--col-ink);margin:34px 0 14px}
.blog-body ul,.blog-body ol{margin:0 0 26px 20px}
.blog-body li{margin-bottom:9px}
.blog-body img{border-radius:var(--r-card);margin:30px 0}
.blog-body strong,.blog-body b{font-weight:700;color:var(--col-ink)}
.blog-body blockquote{border-left:3px solid var(--mk-primary);background:var(--mk-bg-soft);
  border-radius:0 var(--r-base) var(--r-base) 0;padding:18px 22px;margin:30px 0;color:var(--mk-body)}
/* 본문 표 — 항목명(th)을 왼쪽에 두는 설명형. 좁은 화면에서는 위아래로 쌓는다 */
.blog-body table{width:100%;margin:30px 0;border-collapse:collapse;font-size:16px;line-height:1.7;
  border:1px solid var(--mk-line);border-radius:var(--r-base);overflow:hidden}
.blog-body th,.blog-body td{padding:15px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--mk-line)}
.blog-body tr:last-child th,.blog-body tr:last-child td{border-bottom:0}
.blog-body th{width:150px;font-weight:700;color:var(--col-ink);background:var(--mk-bg-soft);white-space:nowrap}
.blog-body td{color:var(--mk-body)}
@media(max-width:860px){
  .blog-single{padding:28px 0 40px}
  .blog-single h1{font-size:26px}
  .blog-body{font-size:16px}
  .blog-body h2{font-size:22px;margin:34px 0 14px}
  .blog-body table{font-size:15px}
  .blog-body th,.blog-body td{display:block;width:auto;border-bottom:0;padding:13px 15px}
  .blog-body th{padding-bottom:2px;background:none;white-space:normal}
  .blog-body td{padding-top:0}
  .blog-body tr{display:block;border-bottom:1px solid var(--mk-line)}
  .blog-body tr:last-child{border-bottom:0}
}

/* ---------- 상세 하단: 이전/다음 · 관련글 ---------- */
.blog-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0;
  padding-top:34px;border-top:1px solid var(--mk-line)}
@media(max-width:640px){.blog-nav{grid-template-columns:1fr}}
.blog-nav a{background:var(--col-card-bg);border-radius:var(--r-card);padding:20px 22px;transition:background .15s}
.blog-nav a:hover{background:var(--mk-primary-soft)}
.blog-nav .dir{font-size:13px;color:var(--col-meta);margin-bottom:7px}
.blog-nav b{font-size:15px;font-weight:600;color:var(--col-ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-nav .next{text-align:right}

/* ---------- 상세 하단 CTA ---------- */
.blog-cta{background:var(--mk-primary-soft);border-radius:var(--r-card);
  padding:40px;text-align:center;margin-top:48px}
.blog-cta h3{font-size:23px;font-weight:700;margin-bottom:10px}
.blog-cta p{font-size:15px;color:var(--mk-body);margin-bottom:22px}

/* ============================================================
   기업(제조사) — 디렉토리 · 상세 · 제품 상세의 회사 카드
   ============================================================ */
/* ---------- 제품 상세: 클릭 가능한 회사 카드 ---------- */
.co-inline{display:flex;align-items:center;gap:14px;background:var(--mk-bg-soft);
  border-radius:var(--r-card);padding:16px 18px;margin-bottom:18px;transition:background .15s}
.co-inline:hover{background:var(--mk-primary-soft)}
.co-inline img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#fff}
.co-inline .tx{min-width:0;flex:1}
.co-inline .nm{font-size:15px;font-weight:700;color:var(--mk-ink);display:flex;align-items:center;gap:6px}
.co-inline .sub{font-size:13px;color:var(--mk-muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-inline .go{font-size:13px;font-weight:600;color:var(--mk-primary);white-space:nowrap}

/* ---------- 기업 디렉토리 카드 ---------- */
.co-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1024px){.co-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.co-grid{grid-template-columns:1fr}}
.co-card{display:block;background:#fff;border:1px solid var(--mk-line);border-radius:var(--r-card);
  overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.co-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.08);border-color:transparent}
.co-card .cv{height:104px;overflow:hidden;background:var(--mk-bg-soft);position:relative}
.co-card .cv img{width:100%;height:100%;object-fit:cover}
.co-card .cv::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(24,110,95,.55),rgba(39,202,161,.45))}
.co-card .bd{padding:0 20px 20px}
.co-card .lg{width:56px;height:56px;border-radius:12px;object-fit:cover;border:3px solid #fff;
  margin-top:-28px;position:relative;z-index:2;background:#fff}
.co-card h3{font-size:17px;font-weight:700;margin:12px 0 4px}
.co-card .tag{font-size:13px;color:var(--mk-body);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.co-card .meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-muted);margin-top:12px}
.co-card .meta i{width:3px;height:3px;border-radius:50%;background:var(--mk-muted);display:inline-block}
.co-card .meta b{color:var(--mk-primary);font-weight:700}

/* ---------- 기업 상세 (wanted 실측: 커버1282x330 + 본문745 + 사이드300 sticky80) ---------- */
.co-cover{position:relative;width:100%;height:330px;overflow:hidden;background:var(--mk-bg-soft)}
.co-cover img{width:100%;height:100%;object-fit:cover}
.co-cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(24,110,95,.55),rgba(39,202,161,.42))}
@media(max-width:860px){.co-cover{height:180px}}

.co-wrap{max-width:var(--maxw);margin:0 auto;padding:0 15px}
.co-head{display:flex;align-items:flex-start;gap:20px;padding:24px 0 28px;
  border-bottom:1px solid var(--mk-line)}
.co-head .lg{width:94px;height:94px;object-fit:cover;border-radius:8px;
  background:#fff;border:1px solid var(--mk-line);flex-shrink:0;margin-top:-58px;position:relative;z-index:2}
.co-head .tx{min-width:0;flex:1;padding-top:2px}
.co-head h1{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#000}
.co-head .sub{font-size:15px;color:var(--mk-body);margin-top:8px;line-height:1.6}
.co-head .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.co-head .chips span{background:var(--mk-bg-soft);color:var(--mk-body);border-radius:4px;
  font-size:13px;font-weight:500;padding:0 10px;height:28px;line-height:28px}
@media(max-width:860px){
  .co-head{flex-direction:column;gap:12px;padding:16px 0 20px}
  .co-head .lg{width:72px;height:72px;margin-top:-40px}
  .co-head h1{font-size:20px}
}

/* 2단 레이아웃 */
.co-body{display:flex;gap:80px;align-items:flex-start;padding:36px 0 60px}
.co-main{width:745px;min-width:0;flex-shrink:0}
.co-aside{width:300px;position:sticky;top:107px;flex-shrink:0}
@media(max-width:1180px){.co-body{gap:40px}.co-main{width:auto;flex:1}}
@media(max-width:900px){.co-body{flex-direction:column;gap:32px;padding:24px 0 48px}
  .co-main,.co-aside{width:100%;position:static}}

/* 본문 섹션 카드 */
.co-sec{padding:0 0 36px;margin-bottom:36px;border-bottom:1px solid var(--mk-line)}
.co-sec:last-child{border-bottom:0}
.co-sec h2{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:18px}
.co-sec h2 .n{color:var(--mk-primary);margin-left:6px}
.co-intro{font-size:16px;line-height:1.85;color:var(--mk-body);white-space:pre-line}

/* 지표 그리드 */
.co-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--mk-line);border-radius:8px;overflow:hidden}
@media(max-width:640px){.co-metrics{grid-template-columns:repeat(2,1fr)}}
.co-metric{padding:20px 18px;border-right:1px solid var(--mk-line)}
.co-metric:last-child{border-right:0}
@media(max-width:640px){.co-metric:nth-child(2n){border-right:0}
  .co-metric:nth-child(-n+2){border-bottom:1px solid var(--mk-line)}}
.co-metric b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--mk-ink)}
.co-metric span{display:block;font-size:13px;color:var(--mk-muted);margin-top:6px}

/* 기본정보 표 */
.co-table{width:100%;font-size:15px}
.co-table tr{border-bottom:1px solid var(--mk-line)}
.co-table tr:last-child{border-bottom:0}
.co-table th{width:140px;text-align:left;padding:14px 0;color:var(--mk-muted);font-weight:500;vertical-align:top}
.co-table td{padding:14px 0;color:var(--mk-ink)}

/* 인증 태그 */
.co-certs{display:flex;flex-wrap:wrap;gap:8px}
.co-certs span{background:var(--mk-primary-soft);color:var(--mk-primary-dark);border-radius:4px;
  font-size:13px;font-weight:600;padding:0 12px;height:32px;line-height:32px}

/* 제품 리스트(본문 745 안 2열) */
.co-prods{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
@media(max-width:640px){.co-prods{grid-template-columns:1fr}}

/* 사이드 문의 박스 */
.co-box{border:1px solid var(--mk-line);border-radius:8px;padding:22px 20px;background:#fff}
.co-box .t{font-size:16px;font-weight:700;margin-bottom:6px}
.co-box .d{font-size:14px;color:var(--mk-muted);line-height:1.6;margin-bottom:16px}
.co-box .btn{width:100%}
.co-box .meta{margin-top:16px;padding-top:16px;border-top:1px solid var(--mk-line);
  font-size:13px;color:var(--mk-muted);line-height:1.9}
.co-box .meta b{color:var(--mk-ink);font-weight:600}

/* ============================================================
   제조사 유치 랜딩 (maker.html)
   ============================================================ */
.lp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 15px}

/* ---------- 이용 가이드 (문서형) ----------
   trevity 헬프센터 실측: 좌측 목차 288px sticky + 우측 아티클(패딩 44 60),
   활성 링크 = 브랜드 소프트 배경 필(r8) */
.gdoc{display:flex;align-items:flex-start;gap:24px;padding-top:34px;min-height:60vh}
.gdoc-side{width:288px;flex-shrink:0;position:sticky;top:154px;
  background:var(--mk-bg-soft);border-radius:var(--r-card);padding:18px 14px}
.gdoc-g{margin-bottom:18px}
.gdoc-g:last-child{margin-bottom:4px}
.gdoc-g > span{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  color:var(--mk-muted);letter-spacing:.03em;padding:0 12px 7px}
.gdoc-g > span svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.gdoc-g > span i{font-style:normal}
.gdoc-g a{display:block;font-size:14px;color:var(--mk-body);padding:8px 12px;border-radius:8px;
  transition:background .15s,color .15s}
.gdoc-g a:hover{background:#fff;color:var(--mk-ink)}
.gdoc-g a.on{background:var(--mk-primary-soft);color:var(--mk-primary-dark);font-weight:600}
.gdoc-main{flex:1;min-width:0;padding:24px 60px 90px}
.gdoc-crumb{font-size:13px;color:var(--mk-muted);margin-bottom:18px}
.gdoc-crumb b{color:var(--mk-ink);font-weight:600}
.gdoc-main h1{font-size:30px;font-weight:800;line-height:1.35;letter-spacing:-.02em;margin-bottom:14px}
.gdoc-lead{font-size:16px;line-height:1.7;color:var(--mk-body);max-width:640px;margin-bottom:34px}
.gdoc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,373px));gap:16px}
.gdoc-cards a{border:1px solid var(--mk-line);border-radius:12px;padding:22px 24px;transition:border-color .15s}
.gdoc-cards a:hover{border-color:var(--mk-primary)}
.gdoc-cards h3{font-size:16px;font-weight:700;margin-bottom:6px}
.gdoc-cards p{font-size:14px;color:var(--mk-muted)}
.gdoc-steps{list-style:none;counter-reset:gd;max-width:680px}
.gdoc-steps li{counter-increment:gd;position:relative;padding:0 0 30px 58px}
.gdoc-steps li::before{content:counter(gd,decimal-leading-zero);position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;background:var(--mk-primary-soft);color:var(--mk-primary-dark);
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.gdoc-steps li:not(:last-child)::after{content:"";position:absolute;left:19px;top:44px;bottom:6px;
  width:2px;background:var(--mk-line)}
.gdoc-steps h3{font-size:17px;font-weight:700;margin-bottom:6px}
.gdoc-steps p{font-size:15px;line-height:1.7;color:var(--mk-body)}
.gdoc-list{max-width:680px}
.gdoc-list > div{padding:18px 0;border-bottom:1px solid var(--mk-line)}
.gdoc-list h3{font-size:16px;font-weight:700;margin-bottom:5px}
.gdoc-list p{font-size:15px;line-height:1.7;color:var(--mk-body)}
.gdoc-main .faq-list{max-width:720px}
.gdoc-cta{display:flex;gap:10px;margin-top:34px}
/* 아티클 본문 요소 */
.gdoc-main h2{font-size:19px;font-weight:700;margin:38px 0 12px;padding-top:26px;border-top:1px solid var(--mk-line)}
.gdoc-main h1+*+h2, .gdoc-main h1+h2{border-top:0;padding-top:0;margin-top:26px}
.gdoc-main p{font-size:15px;line-height:1.75;color:var(--mk-body);max-width:720px;margin-bottom:12px}
.gdoc-main a:not(.btn){color:var(--mk-primary-dark);font-weight:600}
.gdoc-main a:not(.btn):hover{text-decoration:underline}
.gdoc-table{width:100%;max-width:720px;border-collapse:collapse;margin:16px 0 8px;font-size:14px}
.gdoc-table th{width:132px;text-align:left;vertical-align:top;padding:13px 14px 13px 0;
  font-weight:700;color:var(--mk-ink);border-bottom:1px solid var(--mk-line);white-space:nowrap}
.gdoc-table th i{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--mk-primary-dark);margin-top:3px}
.gdoc-table td{padding:13px 0;border-bottom:1px solid var(--mk-line);color:var(--mk-body);line-height:1.7}
.gdoc-note{max-width:720px;background:var(--mk-primary-soft);border-radius:10px;
  padding:15px 18px;font-size:14px;line-height:1.7;color:var(--mk-ink);margin:22px 0 6px}
.gdoc-ol{max-width:720px;margin:8px 0 8px 2px;padding-left:22px}
.gdoc-ol li{font-size:15px;line-height:1.75;color:var(--mk-body);padding:5px 0}
.gdoc-ol.big li{padding:9px 0 9px 6px}
.gdoc-ol li b{color:var(--mk-ink)}
.gdoc-ul{max-width:720px;list-style:none;margin:8px 0}
.gdoc-ul li{position:relative;padding:7px 0 7px 20px;font-size:15px;line-height:1.7;color:var(--mk-body)}
.gdoc-ul li::before{content:"";position:absolute;left:2px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--mk-primary)}
.gdoc-ul li b{color:var(--mk-ink)}
/* 이전·다음 */
.gdoc-pn{display:flex;justify-content:space-between;gap:14px;max-width:720px;margin-top:46px;
  padding-top:22px;border-top:1px solid var(--mk-line)}
.gdoc-pn a{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--mk-body) !important;
  border:1px solid var(--mk-line);border-radius:10px;padding:13px 18px;max-width:48%;transition:border-color .15s}
.gdoc-pn a:hover{border-color:var(--mk-primary);text-decoration:none !important;color:var(--mk-primary-dark) !important}
.gdoc-pn a i{font-style:normal;color:var(--mk-muted)}
.gdoc-pn a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:960px){
  .gdoc{flex-direction:column;gap:18px}
  .gdoc-side{position:static;width:100%;display:flex;flex-wrap:wrap;gap:4px 14px;padding:12px}
  .gdoc-g{margin:0;display:flex;align-items:center;gap:4px}
  .gdoc-g > span{padding:0 4px 0 0}
  .gdoc-g > span i{display:none}
  .gdoc-main{padding:6px 4px 60px}
  .gdoc-cards{grid-template-columns:1fr}
}

/* ---------- 고객센터 게시판 (addwel /bbs/notice 실측) ----------
   3등분 폴더 탭: 활성 = 흰배경 + 2px 잉크 테두리(위 라운드 8), 비활성 = #F1F1F5.
   테이블: 행 64px, TOP 배지 = 브랜드색 알약 11px. */
.nb-tabs{display:flex}
.nb-tabs a{flex:1;height:56px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;color:#787878;background:#F1F1F5;
  border:1px solid #E5E5EC;border-radius:8px 8px 0 0;margin-right:-1px}
.nb-tabs a.on{background:#fff;color:var(--mk-ink);border:2px solid var(--mk-ink);border-bottom-color:#fff;
  position:relative;z-index:2;height:58px;margin-top:-2px}
.nb-body{border-top:2px solid var(--mk-ink);margin-top:-1px;padding:30px 0 70px}
.nb-bar{display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.nb-search{display:flex;gap:8px;max-width:520px}
.nb-search input{flex:1;height:42px;border:1px solid var(--mk-line-strong);border-radius:6px;
  padding:0 14px;font-size:15px;font-family:var(--font-body);color:var(--mk-ink)}
.nb-search input:focus{outline:none;border-color:var(--mk-primary)}
.nb-cats{display:flex;gap:2px;flex-wrap:wrap}
.nb-cats button{padding:9px 14px;font-size:15px;color:var(--mk-body);border-radius:6px}
.nb-cats button:hover{color:var(--mk-ink)}
.nb-cats button.on{color:var(--mk-primary-dark);font-weight:700;background:var(--mk-primary-soft)}
.nb-total{font-size:14px;color:var(--mk-body);margin:10px 0 6px}
.tbl-wrap-pub{overflow-x:auto}
.nb-table{width:100%;min-width:640px;border-collapse:collapse;border-top:1px solid var(--mk-ink)}
.nb-table th{font-size:15px;font-weight:600;color:var(--mk-ink);text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--mk-line-strong);white-space:nowrap}
.nb-table td{padding:0 16px;height:64px;border-bottom:1px solid var(--mk-line);font-size:15px;color:var(--mk-ink);vertical-align:middle}
.nb-table tbody tr{cursor:pointer}
.nb-table tbody tr:hover .tt span{color:var(--mk-primary-dark);text-decoration:underline}
.nb-table .no{width:64px;color:var(--mk-muted)}
.nb-table .cat{width:110px;color:var(--mk-body)}
.nb-table .dt{width:130px;color:var(--mk-muted);font-variant-numeric:tabular-nums}
.nb-table .tt{max-width:0}
.nb-table .tt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%;vertical-align:middle}
.nb-table .nb-empty{text-align:center;color:var(--mk-muted);padding:56px 0;cursor:default}
i.top{display:inline-block;font-style:normal;font-size:11px;font-weight:600;color:#fff;
  background:var(--mk-primary);border-radius:50px;padding:3px 8px;margin-right:8px;vertical-align:middle;line-height:1}
.nb-pages{display:flex;justify-content:center;gap:4px;margin-top:26px}
.nb-pages button{min-width:34px;height:34px;border-radius:6px;font-size:14px;color:var(--mk-body)}
.nb-pages button.on{background:var(--mk-ink);color:#fff;font-weight:700}
/* 상세 */
.nb-view .hd{border-bottom:1px solid var(--mk-line-strong);padding-bottom:18px;margin-bottom:24px}
.nb-view .hd .cat{display:inline-block;font-size:13px;font-weight:700;color:var(--mk-primary-dark);margin-bottom:8px}
.nb-view h2{font-size:24px;font-weight:700;line-height:1.4}
.nb-view .hd .dt{font-size:13px;color:var(--mk-muted);margin-top:8px}
.nb-view .bd{font-size:15px;line-height:1.8;color:var(--mk-body);min-height:120px;max-width:860px}
.nb-view .bd p{margin-bottom:12px}
.nb-view .ft{margin-top:36px;padding-top:20px;border-top:1px solid var(--mk-line)}
.nb-lead{font-size:15px;color:var(--mk-body);line-height:1.7;margin-bottom:22px}
/* FAQ 게시판 — 행 클릭 시 답변 행이 아래로 펼쳐진다 (addwel '펼치기') */
.fq-table .chv{width:56px;text-align:center}
.fq-table .chv svg{width:18px;height:18px;stroke:var(--mk-muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;vertical-align:middle}
.fq-row.open .chv svg{transform:rotate(180deg)}
.fq-row.open .tt span{font-weight:700}
.fq-ans{display:none;cursor:default}
.fq-ans.show{display:table-row}
.fq-ans td{background:var(--mk-bg-soft);height:auto;padding:0}
.fq-ans div{padding:20px 4px;font-size:15px;line-height:1.75;color:var(--mk-body);max-width:900px}
.fq-ans:hover{background:none}
/* 1:1 문의 — 폼(좌) + 안내(우) */
.ask-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding-top:6px}
@media(max-width:960px){.ask-grid{grid-template-columns:1fr;gap:24px}}
.ask-form .f-row label .req,.ask-agree .req{font-style:normal;color:var(--mk-danger);margin-left:3px}
.ask-agree{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--mk-body);
  line-height:1.6;margin:6px 0 18px;cursor:pointer}
.ask-agree input{width:16px;height:16px;margin-top:3px;flex-shrink:0;accent-color:var(--mk-primary)}
.ask-actions{display:flex;justify-content:flex-end}
.ask-actions .btn{min-width:180px;height:50px}
.ask-side .box{background:var(--mk-bg-soft);border-radius:var(--r-card);padding:24px 26px;margin-bottom:16px}
.ask-side h4{font-size:15px;font-weight:700;margin-bottom:10px}
.ask-side p{font-size:14px;line-height:1.7;color:var(--mk-body);margin-bottom:10px}
.ask-side p:last-child{margin-bottom:0}
.ask-side .mail{display:block;font-size:15px;font-weight:700;color:var(--mk-primary-dark)}
.ask-side a{color:var(--mk-primary-dark);font-weight:600}
@media(max-width:640px){
  .nb-tabs a{font-size:14px;height:48px}
  .nb-tabs a.on{height:50px}
  .nb-table .cat{display:none}
  .nb-table th.cat{display:none}
}

/* 공지사항 게시판 */
.np-list{max-width:720px;border-top:1px solid var(--mk-line-strong)}
.np-list a{display:flex;align-items:center;gap:18px;padding:16px 4px;border-bottom:1px solid var(--mk-line);
  font-weight:500 !important;color:var(--mk-ink) !important}
.np-list a:hover{text-decoration:none !important}
.np-list a:hover b{color:var(--mk-primary-dark)}
.np-list .d{flex-shrink:0;font-size:13px;color:var(--mk-muted);font-variant-numeric:tabular-nums}
.np-list b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-date{font-size:13px;color:var(--mk-muted);margin:-4px 0 22px}
.np-body{max-width:720px;font-size:15px;line-height:1.8;color:var(--mk-body)}
.np-body p{margin-bottom:12px}

/* ---------- 서비스 소개 (바이어) ----------
   제조사 랜딩(.lp-*)과 같은 뼈대를 쓰되 히어로만 민트로 갈라
   제조사=네이비 / 바이어=민트 로 두 페이지가 짝처럼 보이게 한다. */
.lp-hero.buyer{background:linear-gradient(120deg,var(--mk-primary-dark) 0%,var(--mk-primary) 58%,#3AD8B4 100%)}
.lp-hero.buyer .lp-kick{color:#fff;background:rgba(255,255,255,.16);
  display:inline-block;border-radius:var(--r-pill);padding:6px 14px}
.lp-hero.buyer .lead{color:rgba(255,255,255,.9)}
.lp-hero.buyer .lp-hero-facts b{color:#fff}
.lp-hero.buyer .lp-hero-facts span{color:rgba(255,255,255,.78)}
.lp-hero.buyer .btn-primary{background:#fff;color:var(--mk-primary-dark)}
.lp-hero.buyer .btn-primary:hover{background:#fff;transform:translateY(-2px)}

.ab-hero{padding:74px 0 66px;text-align:center;
  background:linear-gradient(180deg,var(--mk-primary-soft) 0%,#fff 100%)}
.ab-kick{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--mk-primary-dark);background:#fff;border:1px solid var(--mk-primary);
  border-radius:var(--r-pill);padding:7px 16px;margin-bottom:24px}
.ab-hero h1{font-size:46px;font-weight:800;line-height:1.28;letter-spacing:-.03em;color:var(--mk-ink)}
.ab-lead{max-width:620px;margin:20px auto 0;font-size:17px;line-height:1.75;color:var(--mk-body)}
.ab-hero-cta{display:flex;justify-content:center;gap:10px;margin-top:32px}
.ab-hero-cta .btn-lg{height:54px;padding:0 30px;font-size:16px}
.ab-stats{display:flex;justify-content:center;gap:0;margin-top:56px}
.ab-stats > div{padding:0 44px;text-align:center;border-left:1px solid var(--mk-line-strong)}
.ab-stats > div:first-child{border-left:0}
.ab-stats b{display:block;font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--mk-primary-dark)}
.ab-stats span{display:block;font-size:13px;color:var(--mk-muted);margin-top:7px}
@media(max-width:860px){
  .ab-hero{padding:52px 0 46px}
  .ab-hero h1{font-size:30px}
  .ab-lead{font-size:15px}
  .ab-hero-cta{flex-direction:column}
  .ab-stats{flex-direction:column;gap:22px;margin-top:38px}
  .ab-stats > div{border-left:0;padding:0}
}

.ab-sec{padding:78px 0}
.ab-sec.soft{background:var(--mk-bg-soft)}
.ab-head{max-width:720px;margin-bottom:44px}
.ab-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--mk-primary-dark);
  background:var(--mk-primary-soft);border-radius:4px;padding:5px 11px;margin-bottom:16px}
.ab-tag.light{background:rgba(255,255,255,.14);color:#fff}
.ab-head h2{font-size:32px;font-weight:800;line-height:1.38;letter-spacing:-.02em;color:var(--mk-ink)}
.ab-head p{font-size:16px;line-height:1.75;color:var(--mk-body);margin-top:14px}
@media(max-width:860px){.ab-sec{padding:52px 0}.ab-head h2{font-size:23px}}

/* 핵심 장치 — 다크 밴드 + 잠금 전후 비교 데모 */
.ab-lock{background:linear-gradient(115deg,var(--mk-navy-deep) 0%,var(--mk-navy) 100%);padding:78px 0}
.ab-lock-row{display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:center}
@media(max-width:1100px){.ab-lock-row{grid-template-columns:1fr;gap:34px}}
.ab-lock-tx h2{font-size:32px;font-weight:800;line-height:1.38;letter-spacing:-.02em;color:#fff;margin-bottom:18px}
.ab-lock-tx p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.76)}
.ab-lock-note{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  font-size:15px !important;color:var(--mk-mint) !important;font-weight:600}
.ab-lock-demo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.ab-lock-demo{grid-template-columns:1fr}}
.ab-lock-demo .pane{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:18px 18px 8px}
.ab-lock-demo .pane.on{background:#fff;border-color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.ab-lock-demo .cap{font-size:12px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:12px}
.ab-lock-demo .pane.on .cap{color:var(--mk-primary-dark)}
.ab-lock-demo .rows > div{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}
.ab-lock-demo .pane.on .rows > div{border-bottom-color:var(--mk-line)}
.ab-lock-demo .rows > div:last-child{border-bottom:0}
.ab-lock-demo .rows span{color:rgba(255,255,255,.55)}
.ab-lock-demo .pane.on .rows span{color:var(--mk-muted)}
.ab-lock-demo .rows b{font-size:14px;font-weight:700;color:var(--mk-ink)}
.ab-lock-demo .bar{width:74px;height:11px;border-radius:3px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.26) 0 4px,transparent 4px 8px)}

/* 왜 만들었나 — 카드 대신 큰 번호 + 본문 */
.ab-probs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media(max-width:960px){.ab-probs{grid-template-columns:1fr;gap:28px}}
.ab-probs > div{display:flex;gap:18px;align-items:flex-start}
.ab-probs i{font-style:normal;font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--mk-line-strong);flex-shrink:0}
.ab-probs h3{font-size:18px;font-weight:700;color:var(--mk-ink);margin-bottom:9px;line-height:1.4}
.ab-probs p{font-size:15px;line-height:1.75;color:var(--mk-body)}

/* 국가별 인증 */
.ab-vers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--mk-ink)}
@media(max-width:860px){.ab-vers{grid-template-columns:1fr}}
.ab-vers > div{padding:28px 26px 30px;border-bottom:1px solid var(--mk-line);border-left:1px solid var(--mk-line)}
.ab-vers > div:first-child{border-left:0}
.ab-vers h3{font-size:17px;font-weight:700;color:var(--mk-ink);margin-bottom:9px}
.ab-vers p{font-size:15px;line-height:1.75;color:var(--mk-body)}

/* 바이어용 · 제조사용 2열 */
.ab-two{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:860px){.ab-two{grid-template-columns:1fr}}
.ab-col{background:#fff;border-radius:var(--r-card);padding:36px 34px}
.ab-col.dark{background:var(--mk-navy-deep)}
.ab-col-tag{display:inline-block;background:var(--mk-primary-soft);color:var(--mk-primary-dark);
  font-size:12px;font-weight:700;padding:0 10px;height:25px;line-height:25px;border-radius:4px;margin-bottom:14px}
.ab-col.dark .ab-col-tag{background:rgba(50,209,177,.16);color:var(--mk-mint)}
.ab-col h3{font-size:20px;font-weight:700;color:var(--mk-ink);margin-bottom:18px;line-height:1.4}
.ab-col.dark h3{color:#fff}
.ab-col ul{list-style:none;margin-bottom:24px}
.ab-col li{position:relative;padding:11px 0 11px 22px;font-size:15px;line-height:1.6;color:var(--mk-body);
  border-bottom:1px solid var(--mk-line)}
.ab-col.dark li{color:rgba(255,255,255,.8);border-bottom-color:rgba(255,255,255,.12)}
.ab-col li:last-child{border-bottom:0}
.ab-col li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;
  border-radius:50%;background:var(--mk-primary)}
.ab-col.dark li::before{background:var(--mk-mint)}
.ab-mbtn{background:var(--mk-mint);color:var(--mk-navy-deep);font-weight:700}
.ab-mbtn:hover{background:#fff}

/* 고객센터 */
.sp-val{display:block;margin-top:14px;font-size:15px;font-weight:700;color:var(--mk-primary-dark)}
.sp-hours{margin-top:30px;background:var(--mk-bg-soft);border-radius:var(--r-card);padding:26px 30px}
.sp-hours h4{font-size:15px;font-weight:700;color:var(--mk-ink);margin-bottom:8px}
.sp-hours p{font-size:15px;color:var(--mk-body);line-height:1.7}
.sp-form{max-width:760px;margin:0 auto;background:#fff;border-radius:var(--r-card);padding:34px 32px}
@media(max-width:640px){.sp-form,.ab-col{padding:24px 20px}}

/* --- 히어로 (다크) --- */
.lp-hero{background:linear-gradient(135deg,var(--mk-navy-deep) 0%,var(--mk-navy) 55%,var(--mk-navy-lift) 100%);
  position:relative;overflow:hidden;color:#fff;padding:96px 0 88px}
.lp-hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:44px 44px;opacity:.045}
.lp-hero::after{content:"";position:absolute;right:-160px;top:-120px;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,202,161,.30) 0%,rgba(0,151,224,.10) 50%,transparent 72%)}
.lp-hero .lp-wrap{position:relative;z-index:2}
.lp-kick{font-size:13px;font-weight:600;color:#7FF0D4;letter-spacing:.02em;margin-bottom:18px}
.lp-hero h1{font-size:56px;font-weight:800;line-height:1.26;letter-spacing:-.035em;margin-bottom:22px;max-width:880px;color:#fff}
.lp-hero h1 em{font-style:normal;color:#3FE9C0}
.lp-hero .lead{font-size:18px;line-height:1.75;color:rgba(255,255,255,.8);max-width:600px;margin-bottom:34px}
.lp-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.lp-hero-cta .btn{height:54px;padding:0 32px;font-size:16px;font-weight:600;
  display:inline-flex;align-items:center;border-radius:var(--r-sm)}
.lp-hero-cta .ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.42)}
.lp-hero-cta .ghost:hover{background:rgba(255,255,255,.2)}
.lp-hero .note{margin-top:20px;font-size:13px;color:rgba(255,255,255,.5)}
/* 히어로 하단 확정 조건 3개 — 근거 없는 숫자 대신 우리가 바로 보장하는 값만 */
.lp-hero-facts{position:relative;z-index:2;display:flex;gap:0;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.lp-hero-facts > div{padding-right:44px;margin-right:44px;border-right:1px solid rgba(255,255,255,.16)}
.lp-hero-facts > div:last-child{border-right:0;margin-right:0;padding-right:0}
.lp-hero-facts b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--mk-mint)}
.lp-hero-facts span{display:block;font-size:13px;color:rgba(255,255,255,.62);margin-top:6px}
@media(max-width:720px){
  .lp-hero-facts{flex-direction:column;gap:18px;padding-top:20px;margin-top:30px}
  .lp-hero-facts > div{padding-right:0;margin-right:0;border-right:0}
  .lp-hero-facts b{font-size:20px}
}

/* --- 섹션 공통 --- */
.lp-sec{padding:86px 0}
.lp-sec.soft{background:var(--mk-bg-soft)}
.lp-sec.dark{background:var(--mk-navy);color:#fff}
.lp-head{margin-bottom:48px;max-width:860px}
.lp-head .tag{font-size:13px;font-weight:600;color:var(--mk-primary);margin-bottom:12px}
.lp-head h2{font-size:38px;font-weight:800;line-height:1.34;letter-spacing:-.03em;margin-bottom:16px}
.lp-sec.dark .lp-head h2{color:#fff}
.lp-sec.dark .lp-stat .lbl,.lp-sec.dark .lp-market b{color:#fff}
.lp-head p{font-size:16px;line-height:1.8;color:var(--mk-body);max-width:620px}
.lp-sec.dark .lp-head p{color:rgba(255,255,255,.72)}
.lp-sec.dark .lp-head .tag{color:#3FE9C0}

/* --- 3열 카드 --- */
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lp-card{background:#fff;border:1px solid var(--mk-line);border-radius:12px;padding:32px 28px}
.lp-sec.soft .lp-card{background:#fff}
.lp-card .n{font-size:13px;font-weight:700;color:var(--mk-primary);margin-bottom:14px}
.lp-card h3{font-size:19px;font-weight:700;line-height:1.45;margin-bottom:10px;letter-spacing:-.02em}
.lp-card p{font-size:15px;line-height:1.75;color:var(--mk-body)}

/* --- 비교표 --- */
.lp-vs{width:100%;max-width:1080px;margin:0 auto;border-collapse:collapse;background:#fff;
  border:1px solid var(--mk-line);border-radius:12px;overflow:hidden}
.lp-vs th,.lp-vs td{padding:20px 24px;text-align:left;font-size:15px;border-bottom:1px solid var(--mk-line)}
.lp-vs thead th{background:var(--mk-bg-soft);font-size:14px;font-weight:700}
.lp-vs thead th:last-child{background:var(--mk-primary-soft);color:var(--mk-ink)}
.lp-vs tbody th{width:180px;font-weight:600;color:var(--mk-muted);font-size:14px}
.lp-vs td.old{color:var(--mk-muted)}
.lp-vs td.new{font-weight:600;color:var(--mk-ink);background:rgba(39,202,161,.05)}
.lp-vs tr:last-child th,.lp-vs tr:last-child td{border-bottom:0}

/* --- 숫자 --- */
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden}
.lp-stat{background:var(--mk-navy);padding:34px 26px}
.lp-stat .num{font-size:36px;font-weight:700;color:#3FE9C0;letter-spacing:-.03em;line-height:1.2}
.lp-stat .lbl{font-size:15px;font-weight:600;margin-top:10px}
.lp-stat .sub{font-size:13px;color:rgba(255,255,255,.55);margin-top:5px;line-height:1.6}

/* --- 시장 --- */
.lp-markets{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}
.lp-market{border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:26px 22px}
.lp-market b{display:block;font-size:17px;font-weight:700;margin-bottom:8px}
.lp-market span{font-size:14px;line-height:1.7;color:rgba(255,255,255,.66)}

/* --- 스텝 --- */
.lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st}
.lp-step{position:relative;padding-top:26px;border-top:2px solid var(--mk-line)}
.lp-step.on{border-top-color:var(--mk-primary)}
.lp-step .st{font-size:13px;font-weight:700;color:var(--mk-primary);margin-bottom:10px}
.lp-step h3{font-size:18px;font-weight:700;margin-bottom:9px;letter-spacing:-.02em}
.lp-step p{font-size:14.5px;line-height:1.75;color:var(--mk-body)}

/* --- 혜택 2열 --- */
.lp-bens{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.lp-ben{display:flex;gap:16px;padding:24px 0;border-bottom:1px solid var(--mk-line)}
.lp-ben .k{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--mk-primary-soft);
  color:var(--mk-primary);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.lp-ben h3{font-size:16px;font-weight:700;margin-bottom:6px}
.lp-ben p{font-size:14.5px;line-height:1.7;color:var(--mk-body)}

/* --- 적합/부적합 --- */
.lp-fit{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lp-fit-box{border-radius:12px;padding:32px 30px;border:1px solid var(--mk-line);background:#fff}
.lp-fit-box.yes{border-color:var(--mk-primary);background:var(--mk-primary-soft)}
.lp-fit-box h3{font-size:19px;font-weight:700;margin-bottom:18px;letter-spacing:-.02em}
.lp-fit-box li{font-size:15px;line-height:1.7;color:var(--mk-body);padding:9px 0 9px 18px;position:relative;list-style:none}
.lp-fit-box li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;
  background:var(--mk-muted)}
.lp-fit-box.yes li::before{background:var(--mk-primary)}
.lp-fit-box.yes li{color:var(--mk-ink)}

/* --- FAQ --- */
.lp-faq{border-top:1px solid var(--mk-line);max-width:940px;margin:0 auto}
.lp-faq details{border-bottom:1px solid var(--mk-line)}
.lp-faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:17px;font-weight:600;
  position:relative;letter-spacing:-.01em}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"";position:absolute;right:8px;top:32px;width:10px;height:10px;
  border-right:2px solid var(--mk-muted);border-bottom:2px solid var(--mk-muted);
  transform:rotate(45deg);transition:transform .2s}
.lp-faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.lp-faq .a{padding:0 40px 26px 0;font-size:15.5px;line-height:1.8;color:var(--mk-body)}

/* --- 폼 --- */
.lp-form-row{display:flex;gap:56px;align-items:flex-start}
.lp-form-side{width:340px;flex-shrink:0}
.lp-form-side h2{font-size:32px;font-weight:700;line-height:1.38;letter-spacing:-.03em;margin-bottom:16px}
.lp-form-side p{font-size:15.5px;line-height:1.8;color:var(--mk-body);margin-bottom:22px}
.lp-form-side .ct{font-size:14px;line-height:2;color:var(--mk-muted)}
.lp-form-side .ct b{color:var(--mk-ink);font-weight:600}
.lp-form{flex:1;min-width:0;background:#fff;border:1px solid var(--mk-line);border-radius:12px;padding:36px 34px}
.lp-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.lp-fld{margin-bottom:18px}
.lp-fld label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px}
.lp-fld label i{font-style:normal;color:var(--mk-primary);margin-left:3px}
.lp-fld input,.lp-fld select,.lp-fld textarea{width:100%;border:1px solid var(--mk-line-strong);
  border-radius:var(--r-sm);padding:13px 14px;font-size:15px;font-family:var(--font-body);
  color:var(--mk-ink);background:#fff}
.lp-fld textarea{min-height:112px;resize:vertical;line-height:1.7}
.lp-fld input:focus,.lp-fld select:focus,.lp-fld textarea:focus{outline:none;border-color:var(--mk-primary)}
.lp-fld .hint{font-size:12.5px;color:var(--mk-muted);margin-top:7px;line-height:1.6}
.lp-agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--mk-body);
  line-height:1.65;margin:6px 0 20px}
.lp-agree input{margin-top:2px;flex-shrink:0}
.lp-form .btn{width:100%;height:54px;font-size:16px;font-weight:600}
.lp-err{color:#E03131;font-size:13.5px;margin-bottom:14px;display:none}
.lp-done{text-align:center;padding:56px 20px}
.lp-done h3{font-size:24px;font-weight:700;margin-bottom:12px}
.lp-done p{font-size:15.5px;line-height:1.8;color:var(--mk-body)}

/* --- 마지막 CTA --- */
.lp-last{background:linear-gradient(135deg,var(--mk-navy-deep) 0%,var(--mk-navy) 60%,var(--mk-navy-lift) 100%);
  color:#fff;text-align:center;padding:88px 0}
.lp-last h2{font-size:36px;font-weight:700;line-height:1.4;letter-spacing:-.03em;margin-bottom:16px;color:#fff}
.lp-last p{font-size:16.5px;color:rgba(255,255,255,.75);margin:0 auto 32px;line-height:1.7;max-width:600px}
.lp-last .btn{height:56px;padding:0 40px;font-size:16.5px;font-weight:600;
  display:inline-flex;align-items:center;border-radius:var(--r-sm)}

@media(max-width:1024px){
  .lp-cards,.lp-steps,.lp-markets{grid-template-columns:repeat(2,1fr)}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  .lp-form-row{flex-direction:column;gap:34px}
  .lp-form-side{width:100%}
}
@media(max-width:720px){
  .lp-hero{padding:64px 0 58px}
  .lp-hero h1{font-size:30px}
  .lp-hero .lead{font-size:16px}
  .lp-hero-cta .btn{width:100%;justify-content:center}
  .lp-sec{padding:58px 0}
  .lp-head h2{font-size:26px}
  .lp-cards,.lp-steps,.lp-markets,.lp-bens,.lp-fit,.lp-grid2{grid-template-columns:1fr;gap:18px}
  .lp-bens{gap:0}
  .lp-stats{grid-template-columns:1fr}
  .lp-vs th,.lp-vs td{padding:15px 14px;font-size:14px}
  .lp-vs tbody th{width:120px}
  .lp-form{padding:26px 20px}
  .lp-last h2{font-size:26px}
  .lp-last .btn{width:100%;justify-content:center}
}

/* ============================================================
   회원가입 — 단일 화면 폼
   ============================================================ */
.modal{max-width:560px}
.fs{border:1px solid var(--mk-line);border-radius:10px;padding:18px 18px 6px;margin-bottom:14px}
.fs-t{font-size:13px;font-weight:700;color:var(--mk-ink);margin-bottom:14px}
.f-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
/* 견적 문의 — 수량·단위·시기 한 줄 */
.f-3col{display:grid;grid-template-columns:1.2fr .9fr 1.3fr;gap:0 12px}
@media(max-width:520px){.f-2col,.f-3col{grid-template-columns:1fr}.modal{max-width:100%}}
/* 필요 서류 체크 묶음 */
.chk-row{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.chk-row label,.chk-one{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  color:var(--mk-body);cursor:pointer;margin-bottom:0}
.chk-row input,.chk-one input{width:16px;height:16px;flex-shrink:0;accent-color:var(--mk-primary)}
.chk-one{margin:2px 0 16px}
.inq-auto{font-size:13px;color:var(--mk-muted);line-height:1.6;
  background:var(--mk-bg-soft);border-radius:8px;padding:11px 14px;margin-bottom:16px}
/* 간단히 물어보기 ↔ 견적 요청 — 카드형 2지선다 */
.inq-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.inq-modes.three{grid-template-columns:repeat(3,1fr);gap:8px}
.inq-modes.three button{padding:12px 12px}
.inq-modes.three button.on{padding:11px 11px}
.inq-modes.three button b{font-size:13.5px}
.inq-modes.three button span{font-size:11.5px}
.inq-modes button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  border:1px solid var(--mk-line-strong);border-radius:10px;padding:13px 15px;
  background:#fff;transition:border-color .15s,background .15s}
.inq-modes button b{font-size:14px;font-weight:700;color:var(--mk-ink)}
.inq-modes button span{font-size:12px;line-height:1.45;color:var(--mk-muted)}
.inq-modes button:hover{border-color:var(--mk-primary)}
.inq-modes button.on{border-color:var(--mk-primary);border-width:2px;padding:12px 14px;
  background:var(--mk-primary-soft)}
.inq-modes button.on b{color:var(--mk-primary-dark)}
@media(max-width:520px){.inq-modes{grid-template-columns:1fr}}

/* 왜 받는지 안내 — 세금코드 입력에서 멈추지 않게 */
.why-box{background:var(--mk-bg-soft);border-radius:8px;padding:14px 16px;margin:4px 0 14px}
.why-box b{display:block;font-size:13px;font-weight:700;color:var(--mk-ink);margin-bottom:8px}
.why-box ul{margin:0;padding:0;list-style:none}
.why-box li{position:relative;font-size:12.5px;line-height:1.7;color:var(--mk-body);padding-left:14px}
.why-box li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;
  border-radius:50%;background:var(--mk-primary)}

/* 인증 결과 안의 대안 링크 */
.mst-result .retry{margin-top:8px}
.mst-result .retry a{font-size:12.5px;font-weight:600;color:var(--mk-primary);
  cursor:pointer;text-decoration:underline}

/* 인증이 막혔을 때 빠져나갈 문 */
.easy-out{text-align:center;font-size:13px;color:var(--mk-muted);margin-top:16px;line-height:1.7}
.easy-out a{display:inline-block;margin-left:4px;font-weight:700;color:var(--mk-primary);
  cursor:pointer;text-decoration:underline}

/* 비밀번호 확인 안내 */
.pw-msg{font-size:12.5px;line-height:1.6;margin:2px 0 12px;min-height:18px}
.pw-msg.ok{color:var(--mk-primary);font-weight:600}
.pw-msg.bad{color:#E03131;font-weight:600}

/* ---------- 홈 FAQ (텍스트 아코디언 — 알약·이모지 없음) ---------- */
.faq-list{border-top:1px solid #E9ECEF}
.faq-item{border-bottom:1px solid #E9ECEF}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;font-size:16px;font-weight:600;color:#212529}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:20px;font-weight:400;color:#8A8A8A;flex:none}
.faq-item[open] summary::after{content:"−"}
.faq-item .a{padding:0 2px 20px;font-size:15px;line-height:1.75;color:#495057;max-width:820px}

/* 칼럼 본문 안의 FAQ — 본문 폭(780)에 맞춰 붙는다 */
.col-faq{max-width:780px;margin:56px auto 0;padding-top:40px;border-top:1px solid var(--mk-line)}
.col-faq h2{font-size:24px;font-weight:800;color:var(--mk-ink);margin-bottom:18px}

/* ---------- HTML 사이트맵 ---------- */
.sm-list{list-style:none;margin:0 0 8px;padding:0;columns:2;column-gap:40px}
.sm-list li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--mk-line);font-size:15px}
.sm-list a{color:var(--col-ink);font-weight:500}
.sm-list a:hover{color:var(--mk-primary);text-decoration:underline}
.sm-meta{color:var(--col-meta);font-size:13px;margin-left:6px}
@media(max-width:760px){.sm-list{columns:1}}

/* ---------- 화면 편집 모드 (관리자 전용) ---------- */
.mkedit-bar{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;align-items:center;gap:10px;
  background:#0F1A33;color:#fff;border-radius:var(--r-pill);padding:9px 10px 9px 16px;
  box-shadow:0 8px 26px rgba(0,0,0,.3);font-size:13px}
.mkedit-bar b{font-weight:700}
.mkedit-bar span{color:rgba(255,255,255,.7);font-size:12px}
.mkedit-bar button{background:var(--mk-primary);color:#fff;border:0;border-radius:var(--r-pill);
  padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body)}
body.mkedit-on .mkedit-hot{outline:2px solid var(--mk-primary);outline-offset:2px;
  border-radius:3px;cursor:pointer;background:var(--mk-primary-soft)}
.mkedit-pop{position:absolute;z-index:9100;width:min(440px,calc(100vw - 24px));background:#fff;
  border:1px solid var(--mk-line);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.24);padding:14px 16px 12px}
.mkedit-pop .hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mkedit-pop .hd b{font-size:13px;color:var(--mk-primary)}
.mkedit-pop .hd .pt{font-size:11px;color:var(--mk-sub);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkedit-pop .hd .x{border:0;background:none;font-size:20px;line-height:1;color:var(--mk-sub);cursor:pointer}
.mkedit-pop .pick{font-size:12px;color:var(--mk-sub);margin-bottom:10px}
.mkedit-pop .pick select{width:100%;margin-top:5px;border:1px solid var(--mk-line);border-radius:7px;
  padding:7px 9px;font-size:13px;font-family:var(--font-body)}
.mkedit-pop label{display:block;margin-bottom:9px}
.mkedit-pop label span{display:block;font-size:10px;font-weight:700;color:var(--mk-sub);margin-bottom:4px}
.mkedit-pop textarea{width:100%;border:1px solid var(--mk-line);border-radius:7px;padding:8px 10px;
  font-size:14px;line-height:1.6;font-family:var(--font-body);resize:vertical}
.mkedit-pop textarea:focus{outline:none;border-color:var(--mk-primary)}
.mkedit-pop .ft{display:flex;align-items:center;gap:8px;margin-top:4px}
.mkedit-pop .ft .msg{flex:1;font-size:12px;color:var(--mk-sub)}