/*  NEXT 소개 페이지 — 2026-11-04 코덱스 시안 G1(제품 비교판)로 전면 교체.
    까닭: 앞선 판들이 애니플러스와 블록 구성이 같아 계속 같아 보였다.
    여기는 "히어로"가 없다. 첫 화면이 제품 비교판이고, 거기서 바로 샘플로 들어간다.
    색은 종이 + 먹, 제품마다 보라·초록·주황. 강조는 연두.
    화면 테마는 밝은 쪽으로 못박는다.                                        */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#19181d; --ink2:#55515a; --muted:#6d6a67;
  --paper:#f2f0e9; --paper2:#e8e5dc; --white:#fff;
  --line:#c9c5bb; --line2:#a9a399;
  --purple:#7657ff; --green:#205d51; --orange:#d96b35;
  --acid:#dfff44;
  --shell:1200px;
  --f:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  color-scheme:light;
}

html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f);letter-spacing:-.02em;
  line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.shell{width:min(var(--shell),calc(100% - 56px));margin:0 auto}

/* ── 머리띠 ── */
.mast{height:96px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:13px;font-size:27px;font-weight:900;letter-spacing:-.06em}
.logo-mark{width:29px;height:29px;position:relative;display:inline-block;flex:0 0 auto}
.logo-mark i{position:absolute;width:12px;height:8px;background:var(--ink)}
.logo-mark i:nth-child(1){left:0;top:1px;transform:skewY(25deg)}
.logo-mark i:nth-child(2){right:0;top:1px;transform:skewY(-25deg);background:var(--purple)}
.logo-mark i:nth-child(3){left:0;bottom:1px;transform:skewY(-25deg)}
.logo-mark i:nth-child(4){right:0;bottom:1px;transform:skewY(25deg)}
.mast-note{margin-left:32px;color:var(--muted);font-size:14px}
.mast nav{margin-left:auto;display:flex;gap:22px;font-size:14px;font-weight:650;color:var(--ink2)}
.mast nav a:hover{color:var(--ink)}
.contact{margin-left:24px;background:var(--ink);color:#fff;padding:13px 18px;border-radius:999px;
  font-weight:750;font-size:14px;transition:background .15s}
.contact:hover{background:var(--purple)}

/* ── 제품 비교판 (첫 화면) ── */
.selector{padding:34px 0 56px}
.selector-head{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:end;margin-bottom:22px}
.selector-head h1{font-size:26px;line-height:1.22;letter-spacing:-.04em}
.selector-head p{color:var(--muted);font-size:15px}
.compare{border:1px solid var(--ink);border-radius:22px;overflow:hidden;background:#fff;
  box-shadow:7px 7px 0 var(--ink)}
.compare-grid{display:grid;grid-template-columns:230px repeat(3,1fr)}
.cell{padding:18px 20px;border-right:1px solid var(--ink);border-bottom:1px solid var(--line)}
.cell:nth-child(4n){border-right:0}
.head-cell{min-height:170px;padding:24px 22px;border-bottom:1px solid var(--ink);display:flex;flex-direction:column}
.row-label{font-size:13px;font-weight:800;background:#e4e1d9;display:flex;align-items:center}
.product{color:#fff}
.product.p1{background:var(--purple)}
.product.p2{background:var(--green)}
.product.p3{background:var(--orange)}
.product small{font-weight:700;opacity:.75;font-size:12.5px}
.product strong{display:block;margin-top:auto;font-size:28px;letter-spacing:-.05em}
.product em{font-style:normal;font-size:13px;margin-top:7px;opacity:.88}
.value{font-size:14.5px;font-weight:620;line-height:1.5;display:flex;align-items:flex-start}
.value ul{list-style:none}
.value li{position:relative;padding-left:13px;margin-top:4px;font-weight:550;font-size:13.5px;color:var(--ink2)}
.value li:first-child{margin-top:0}
.value li:before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--line2)}

/* ── 선언 띠 ── */
.statement{background:var(--ink);color:#fff;padding:76px 0 82px}
.statement-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:90px}
.statement h2{font-size:clamp(34px,4.6vw,58px);line-height:1.06;letter-spacing:-.065em;margin-bottom:28px;max-width:710px}
.statement p{color:#c8c4ce;font-size:18.5px;line-height:1.68;max-width:700px}
.statement p strong{color:var(--acid)}
.ledger{border-top:1px solid #5a5860;align-self:start}
.ledger div{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #5a5860}
.ledger b{font-size:28px;color:var(--acid);letter-spacing:-.04em}
.ledger span{font-size:13px;color:#aaa6b0;align-self:center}

/* ── 섹션 공통 ── */
section.band{padding:88px 0}
.h2{font-size:clamp(28px,3.6vw,42px);line-height:1.16;letter-spacing:-.055em;max-width:760px}
.copy{font-size:16.5px;line-height:1.8;max-width:860px;color:var(--ink2);margin-top:18px}
.copy strong{color:var(--ink);font-weight:700}

/* ── 스킨 묶음 ── */
.grouphead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:44px 0 16px;
  padding-bottom:9px;border-bottom:1px solid var(--ink)}
.grouphead b{font-size:17px;font-weight:800;letter-spacing:-.03em}
.grouphead span{font-size:13px;color:var(--muted)}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shot{background:#fff;padding:10px;border:1px solid var(--line);border-radius:14px;display:block;
  transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
.shot:hover{transform:translateY(-3px);box-shadow:5px 5px 0 var(--ink);border-color:var(--ink)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px}
.shot .nm{margin:10px 4px 0;font-size:13.5px;font-weight:800}
.shot .ds{margin:2px 4px 2px;font-size:12px;color:var(--muted);font-weight:500}
/* 관리자·파트너 바로가기 */
.live{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.live a{background:#fff;border:1px solid var(--ink);border-radius:14px;padding:18px 18px 16px;display:block;
  transition:box-shadow .16s,transform .16s}
.live a:hover{box-shadow:5px 5px 0 var(--ink);transform:translateY(-2px)}
.live .k{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--purple)}
.live .t{margin-top:7px;font-size:16px;font-weight:800;letter-spacing:-.03em}
.live .s{margin-top:3px;font-size:12.5px;color:var(--muted)}
.live .go{margin-top:12px;font-size:13px;font-weight:800}

/* 샘플 접속 정보 */
.login{margin-top:40px;background:#fff;border:1px solid var(--ink);border-radius:18px;overflow:hidden;
  box-shadow:7px 7px 0 var(--ink)}
.login-h{padding:15px 22px;border-bottom:1px solid var(--ink);font-weight:800;font-size:15.5px;background:var(--acid)}
.login-t{width:100%;border-collapse:collapse;font-size:13.5px}
.login-t td{padding:11px 22px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:middle}
.login-t tr:last-child td{border-bottom:0}
.login-t td:first-child{font-weight:800;color:var(--ink);width:130px;white-space:nowrap}
.login-t code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--paper2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--ink);font-weight:600}
.login-n{padding:15px 22px;background:var(--paper2);border-top:1px solid var(--ink);
  font-size:12.5px;line-height:1.9;color:var(--ink2)}
.login-n strong{color:var(--ink);font-weight:750}
.note{margin-top:18px;font-size:12.5px;line-height:1.85;color:var(--muted)}
.note strong{color:var(--ink2);font-weight:700}

/* ── 스포츠 엔진 ── */
.engine{border-top:1px solid var(--ink);padding-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:24px}
.engine h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.05em;line-height:1.18}
.engine p{font-size:17px;line-height:1.72;color:var(--ink2)}
.engine p strong{color:var(--ink);font-weight:700}
.steps{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.steps div{padding:20px 22px 6px;border-left:1px solid var(--line)}
.steps div:first-child{border-left:0;padding-left:0}
.steps em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.09em;color:var(--purple)}
.steps b{display:block;margin-top:8px;font-size:15.5px;font-weight:800;letter-spacing:-.03em}
.steps p{margin-top:6px;font-size:13px;line-height:1.7;color:var(--ink2)}

/* ── 바닥 ── */
.foot{background:var(--purple);color:#fff;padding:52px 0}
.foot .shell{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot strong{font-size:clamp(22px,3vw,34px);letter-spacing:-.04em}
.foot .fnote{font-size:14px;color:rgba(255,255,255,.82);width:100%;margin-top:-8px}
.foot a{margin-left:auto;background:var(--acid);color:var(--ink);padding:17px 24px;border-radius:999px;font-weight:900}
.foot a:hover{background:#fff}
.tail{padding:26px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tail span{color:var(--muted);font-size:12.5px}

  justify-content:center;padding:40px}
.lb[hidden]{display:none}
.lb img{max-width:min(1400px,94vw);max-height:84vh;border-radius:12px;border:1px solid rgba(255,255,255,.18)}
.lb-x{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:999px;border:1px solid var(--ink);
  background:var(--acid);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;font-weight:900}
.lb-cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:#fff;font-size:13.5px}
.lb-cap b{font-weight:800}
.lb-cap span{color:rgba(255,255,255,.6);margin-left:8px}
.lb-cap em{display:block;margin-top:5px;font-style:normal;font-size:12px;color:rgba(255,255,255,.45)}

/* ── 좁은 화면 ── */
@media (max-width:1040px){
  .wall{grid-template-columns:repeat(2,1fr)}
  .statement-grid{grid-template-columns:1fr;gap:40px}
  .engine{grid-template-columns:1fr;gap:26px}
  .steps{grid-template-columns:1fr 1fr}
  .steps div:nth-child(odd){border-left:0;padding-left:0}
  .steps div:nth-child(n+3){border-top:1px solid var(--line);margin-top:14px}
}
@media (max-width:860px){
  .shell{width:calc(100% - 36px)}
  .mast{height:auto;padding:16px 0;flex-wrap:wrap;gap:10px}
  .mast-note{display:none}
  .mast nav{margin-left:0;order:3;width:100%;gap:16px}
  .contact{margin-left:auto}
  .selector-head{grid-template-columns:1fr;gap:12px}
  .compare-grid{grid-template-columns:1fr}
  .cell{border-right:0}
  .head-cell{min-height:0}
  .row-label{position:sticky;left:0}
  .live{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps div{border-left:0;padding-left:0}
  .steps div:nth-child(n+2){border-top:1px solid var(--line);margin-top:14px}
  section.band{padding:56px 0}
  .login-t td{padding:9px 14px}
  .login-t td:first-child{width:96px}
  .lb{padding:16px}
}
@media (max-width:560px){ .wall{grid-template-columns:1fr} }