* { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:Pretendard,"Malgun Gothic",sans-serif; word-break:keep-all; line-height:1.6; background:var(--bg); color:var(--ink); }
  /* ── B안: 검정 + 형광 (이노컴즈 느낌) ── */
  body.b { --bg:#000; --ink:#f3f3ee; --sub:#9a9a94; --line:#262626; --card:#0e0e0e; --acc:#2f6bff; --onacc:#fff; --r:0px; --disp:"Anton",sans-serif; --dw:400; --dls:0.5px; }
  /* ── C안: 베이지 + 캐릭터 (더씨앤엠 느낌) ── */
  body.c { --bg:#efe5d8; --ink:#161513; --sub:#6b635a; --line:#d9ccba; --card:#fbf6ee; --acc:#ff5b2e; --onacc:#fff; --r:28px; --disp:"Montserrat",sans-serif; --dw:800; --dls:-1.5px; }
  .wrap { max-width:1320px; margin:0 auto; padding:0 40px; }
  .en { font-family:var(--disp); font-weight:var(--dw); letter-spacing:var(--dls); text-transform:uppercase; line-height:0.98; }
  .tagck { display:inline-block; background:#ffd84a; color:#000; font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px; vertical-align:middle; margin-left:6px; }

  nav { position:sticky; top:0; z-index:9; background:var(--bg); border-bottom:1px solid var(--line); }
  nav .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; }
  .logo { font-family:"Montserrat",sans-serif; font-weight:800; font-size:20px; letter-spacing:-0.5px; }
  .logo span { color:var(--acc); }
  nav ul { display:flex; gap:34px; list-style:none; font-size:15px; font-weight:600; }
  body.b nav ul { font-family:"Anton"; font-weight:400; font-size:17px; letter-spacing:1px; }
  .btn { display:inline-block; background:var(--acc); color:var(--onacc); font-weight:800; padding:15px 28px; border-radius:var(--r); font-size:16px; border:2px solid var(--acc); }
  .btn.ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
  .btn.sm { padding:10px 20px; font-size:14px; }

  /* HERO B */
  .heroB { display:none; position:relative; border-bottom:1px solid var(--line); overflow:hidden; }
  body.b .heroB { display:block; }
  .heroB .wall { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; opacity:0.42; }
  .heroB .wall img { width:100%; height:225px; object-fit:cover; display:block; filter:grayscale(0.35); }
  .heroB .over { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.88) 70%,#000); display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:56px; }
  .heroB .over .wrap { width:100%; }
  .heroB .wall { opacity:0.6; }
  .heroB .kick { color:var(--acc); font-weight:700; font-size:15px; letter-spacing:2px; margin-bottom:18px; }
  .heroB h1 { font-size:88px; font-weight:900; letter-spacing:-3.5px; line-height:1.08; }
  .heroB h1 em { font-style:normal; color:var(--acc); }
  .heroB p { font-size:21px; color:#d2d2cc; margin:22px 0 32px; max-width:720px; }
  .cta-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  .cta-note { font-size:14px; color:var(--sub); margin-left:10px; }

  /* HERO C */
  .heroC { display:none; padding:70px 0 40px; position:relative; overflow:hidden; }
  body.c .heroC { display:block; }
  .heroC .grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; }
  .heroC .pill { display:inline-block; border:2px solid var(--ink); border-radius:99px; padding:6px 16px; font-weight:700; font-size:14px; margin-bottom:22px; background:#fff; }
  .heroC h1 { font-size:74px; font-weight:900; letter-spacing:-3px; line-height:1.12; }
  .heroC h1 em { font-style:normal; background:var(--acc); color:#fff; padding:0 12px; border-radius:16px; display:inline-block; transform:rotate(-1.5deg); }
  .heroC p { font-size:20px; color:var(--sub); margin:22px 0 30px; }
  .stage { position:relative; height:520px; }
  .stage .blob { position:absolute; inset:30px 10px 10px 30px; background:#ffc83d; border-radius:46% 54% 50% 50%/55% 45% 55% 45%; }
  .stage .sq1 { position:absolute; left:-30px; top:60px; width:150px; height:34px; background:#1fae64; border-radius:99px; transform:rotate(-18deg); }
  .stage .sq2 { position:absolute; right:-10px; bottom:50px; width:120px; height:34px; background:var(--acc); border-radius:99px; transform:rotate(24deg); }
  .stage img.main { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:430px; border-radius:30px; box-shadow:0 24px 50px rgba(0,0,0,0.22); border:4px solid var(--ink); }
  .stage .chip { position:absolute; background:#fff; border:2px solid var(--ink); border-radius:18px; padding:9px 14px; font-weight:800; font-size:14px; box-shadow:4px 4px 0 var(--ink); }
  .stage .chip.c1 { left:0; bottom:70px; } .stage .chip.c2 { right:0; top:40px; }
  .stage .mini { position:absolute; right:-6px; bottom:6px; width:190px; border-radius:18px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }

  /* 숫자 */
  .nums { border-bottom:1px solid var(--line); }
  .nums .wrap { display:grid; grid-template-columns:repeat(4,1fr); }
  .nums .n { padding:38px 28px; border-left:1px solid var(--line); }
  .nums .n:first-child { border-left:none; padding-left:0; }
  .nums b { display:block; font-family:var(--disp); font-weight:var(--dw); font-size:64px; color:var(--acc); line-height:1; letter-spacing:var(--dls); }
  body.c .nums b { color:var(--ink); }
  .nums span { font-size:15px; color:var(--sub); display:block; margin-top:10px; }

  .marq { border-bottom:1px solid var(--line); padding:20px 0; font-size:14px; color:var(--sub); }
  .marq .wrap { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
  .marq i { font-style:normal; border:1px solid var(--line); background:var(--card); border-radius:var(--r); padding:8px 16px; font-weight:700; color:var(--ink); font-size:14px; }

  section { padding:96px 0; border-bottom:1px solid var(--line); }
  .sec-h { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:30px; }
  .sec-h .en { font-size:84px; }
  body.c .sec-h .en { font-size:60px; }
  .sec-h p { max-width:440px; color:var(--sub); font-size:17px; }

  /* 고민 */
  .pain { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .pain div { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 22px; }
  body.c .pain div { border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
  .pain q { display:block; font-size:19px; font-weight:800; line-height:1.45; quotes:"“" "”"; }
  .pain small { display:block; margin-top:14px; color:var(--acc); font-weight:700; font-size:14px; }
  body.c .pain small { color:#1a8f52; }

  /* 서비스 */
  .core .row { display:grid; grid-template-columns:70px 1.1fr 1.3fr 210px; gap:24px; align-items:center; padding:22px 0; border-top:1px solid var(--line); }
  .core .row:last-child { border-bottom:1px solid var(--line); }
  .core .no { font-family:var(--disp); font-weight:var(--dw); font-size:28px; color:var(--sub); }
  .core h3 { font-size:27px; font-weight:800; letter-spacing:-0.8px; }
  .core p { color:var(--sub); font-size:16px; }
  .core img { width:210px; height:118px; object-fit:cover; border-radius:calc(var(--r)/2); display:block; }
  .core .new { background:var(--acc); color:var(--onacc); font-size:12px; font-weight:800; padding:2px 8px; border-radius:99px; margin-left:8px; vertical-align:middle; }

  /* 비교 */
  .vs { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  body.c .vs { border:2px solid var(--ink); }
  .vs > div { padding:40px; }
  .vs .ai { background:var(--card); color:var(--sub); }
  .vs .us { background:var(--acc); color:var(--onacc); }
  .vs h4 { font-size:24px; font-weight:800; margin-bottom:22px; }
  .vs li { list-style:none; padding:13px 0; border-top:1px solid rgba(128,128,128,0.3); font-size:18px; font-weight:600; }
  .vs .ai li::before { content:"✕  "; } .vs .us li::before { content:"✓  "; font-weight:900; }
  .hyb { margin-top:18px; border:1px dashed var(--sub); border-radius:var(--r); padding:22px 28px; display:flex; justify-content:space-between; align-items:center; font-size:18px; font-weight:700; }

  /* 작업 */
  .works { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
  .works figure { position:relative; overflow:hidden; border-radius:var(--r); background:var(--card); }
  .works img { width:100%; height:100%; object-fit:cover; display:block; }
  .works figcaption { position:absolute; left:0; right:0; bottom:0; padding:40px 18px 14px; background:linear-gradient(transparent,rgba(0,0,0,0.85)); color:#fff; font-weight:700; font-size:16px; }
  .works figcaption small { display:block; font-weight:500; opacity:0.8; font-size:13px; }
  .w1 { grid-column:span 7; height:400px; } .w2 { grid-column:span 5; height:400px; }
  .w3,.w4,.w5 { grid-column:span 4; height:270px; }
  .w6 { grid-column:span 3; height:420px; } .w7 { grid-column:span 3; height:420px; } .w8 { grid-column:span 6; height:420px; }

  /* 전시 띠 */
  .band { background:var(--acc); color:var(--onacc); padding:34px 0; border:none; }
  .band .wrap { display:flex; justify-content:space-between; align-items:center; gap:30px; }
  .band b { font-size:27px; font-weight:900; letter-spacing:-0.8px; }
  .band .btn { background:var(--onacc); color:var(--acc); border-color:var(--onacc); }
  

  /* 과정 */
  .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .steps div { border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; background:var(--card); }
  .steps .en { font-size:40px; color:var(--acc); display:block; margin-bottom:14px; }
  .steps h5 { font-size:20px; font-weight:800; } .steps p { color:var(--sub); font-size:15px; margin-top:6px; }

  /* FAQ */
  .faq .wrap > div:not(.sec-h) { border-top:1px solid var(--line); padding:24px 0; display:grid; grid-template-columns:1fr 1.4fr; gap:30px; }
  .faq .wrap > div:last-child { border-bottom:1px solid var(--line); }
  .faq h5 { font-size:20px; font-weight:800; } .faq p { color:var(--sub); font-size:16px; }

  /* 마지막 문의 */
  .final { text-align:left; }
  .final .en { font-size:120px; margin-bottom:10px; }
  body.c .final .en { font-size:84px; }
  .final h2 { font-size:44px; font-weight:900; letter-spacing:-1.5px; margin-bottom:34px; }
  .quick { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:34px; display:grid; grid-template-columns:repeat(3,1fr) auto; gap:14px; align-items:end; }
  body.c .quick { border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); }
  .quick label { display:block; font-size:13px; font-weight:700; color:var(--sub); margin-bottom:8px; }
  .quick .fld { border:1px solid var(--sub); border-radius:calc(var(--r)/2); padding:14px 16px; font-size:16px; }
  .opts { display:flex; gap:8px; flex-wrap:wrap; }
  .opts span { border:1px solid var(--sub); border-radius:99px; padding:7px 13px; font-size:14px; font-weight:600; }
  .opts span.on { background:var(--acc); color:var(--onacc); border-color:var(--acc); }
  .alt { margin-top:18px; color:var(--sub); font-size:15px; }
  footer { padding:40px 0 110px; color:var(--sub); font-size:14px; }

  .dock { position:fixed; left:0; right:0; bottom:0; z-index:10; background:var(--ink); color:var(--bg); }
  .dock .wrap { display:flex; justify-content:space-between; align-items:center; height:66px; font-weight:700; }
  body.shot .dock { position:static; }
  body.shot footer { padding-bottom:40px; }
  .dock .btn { border-radius:99px; }

  /* v2: 글 줄이고 작업물 중심 */
  section { padding:120px 0; }
  .sec-h { margin-bottom:56px; }
  .heroB h1 { font-size:96px; } .heroB .over { padding-bottom:72px; }
  .heroB .wall img { height:250px; }
  .nums .wrap { grid-template-columns:repeat(3,1fr); }
  .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .tiles figure { position:relative; height:300px; overflow:hidden; border-radius:var(--r); }
  .tiles img { width:100%; height:100%; object-fit:cover; display:block; }
  .tiles figcaption { position:absolute; inset:auto 0 0 0; padding:60px 22px 20px; background:linear-gradient(transparent,rgba(0,0,0,0.88)); color:#fff; font-size:24px; font-weight:800; letter-spacing:-0.6px; }
  .tiles figcaption small { font-family:var(--disp); font-weight:var(--dw); font-size:15px; opacity:0.7; margin-right:10px; }
  .vs li { font-size:20px; padding:16px 0; }
  .one { display:flex; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .one div { flex:1; padding:26px 28px; border-left:1px solid var(--line); font-size:19px; font-weight:800; }
  .one div:first-child { border-left:none; }
  .one .en { color:var(--acc); font-size:22px; margin-right:10px; }
  .quick { grid-template-columns:1.4fr 1fr auto; }

  /* ───── v4 추가 ───── */
  a { color:inherit; text-decoration:none; }
  nav li.on { color:var(--acc); }
  .lab { font-size:13px; letter-spacing:2px; color:var(--acc); font-weight:700; margin-bottom:14px; display:block; }
  /* 하이브리드 */
  .hybrid { margin-top:14px; border:1px solid var(--acc); padding:40px; display:grid; grid-template-columns:1fr 1.25fr; gap:40px; align-items:center; }
  .hybrid h4 { font-size:34px; font-weight:900; letter-spacing:-1px; line-height:1.25; }
  .hybrid h4 em { font-style:normal; color:var(--acc); }
  .hybrid p { color:var(--sub); margin:14px 0 22px; font-size:17px; }
  .eq { display:grid; grid-template-columns:1fr 28px 1fr 28px 1.15fr; gap:10px; align-items:center; }
  .eq figure { position:relative; height:170px; overflow:hidden; border:1px solid var(--line); }
  .eq img { width:100%; height:100%; object-fit:cover; display:block; }
  .eq figcaption { position:absolute; left:0; bottom:0; right:0; background:rgba(0,0,0,0.78); padding:8px 12px; font-size:14px; font-weight:700; }
  .eq figcaption b { color:var(--acc); }
  .eq i { font-style:normal; font-family:var(--disp); font-size:34px; text-align:center; color:var(--sub); }
  .eq .aibg { background:linear-gradient(135deg,#1b2a5c,#5a2a6b 55%,#c2603a); }
  /* 문의 가이드 */
  .guide { background:var(--card); border:1px solid var(--line); padding:38px; }
  .guide .ghead { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; font-size:15px; color:var(--sub); }
  .guide .ghead b { color:var(--ink); font-size:18px; }
  .guide .opt { border:1px solid var(--sub); border-radius:99px; padding:2px 10px; font-size:12px; margin-left:8px; color:var(--sub); font-weight:600; }
  .grow { display:grid; grid-template-columns:190px 1fr; gap:20px; padding:16px 0; border-top:1px solid var(--line); align-items:center; }
  .grow > span { font-weight:700; font-size:16px; }
  .grow > span small { color:var(--acc); font-family:var(--disp); margin-right:10px; font-size:15px; }
  .gend { display:grid; grid-template-columns:1fr 1.3fr auto; gap:12px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); align-items:end; }
  .gend label { display:block; font-size:13px; font-weight:700; color:var(--sub); margin-bottom:8px; }
  .gend label em { color:var(--acc); font-style:normal; }
  .fld { border:1px solid var(--sub); padding:14px 16px; font-size:16px; color:var(--sub); }
  .fld.tall { height:130px; }
  .after { margin-top:16px; color:var(--sub); font-size:14px; }
  .after b { color:var(--ink); }
  /* 서비스 대안 */
  .variant { border:1px dashed #444; padding:6px 14px; display:inline-block; font-weight:800; color:#ffd84a; margin-bottom:28px; font-size:15px; }
  .svc2 a { display:grid; grid-template-columns:90px 1fr 300px; align-items:center; border-top:1px solid var(--line); padding:18px 0; }
  .svc2 a:last-child { border-bottom:1px solid var(--line); }
  .svc2 .no { font-family:var(--disp); font-size:26px; color:var(--sub); }
  .svc2 h3 { font-size:56px; font-weight:900; letter-spacing:-2.5px; line-height:1.1; }
  .svc2 a.hot h3 { color:var(--acc); }
  .svc2 img { width:300px; height:120px; object-fit:cover; display:block; opacity:0.25; }
  .svc2 a.hot img { opacity:1; }
  .svc3 { display:grid; grid-template-columns:3.2fr 1fr 1fr 1fr 1fr 1fr; gap:6px; height:520px; }
  .svc3 figure { position:relative; overflow:hidden; }
  .svc3 img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.7) brightness(0.55); }
  .svc3 figure.open img { filter:none; }
  .svc3 figcaption { position:absolute; left:18px; bottom:18px; font-size:22px; font-weight:800; writing-mode:vertical-rl; }
  .svc3 figure.open figcaption { writing-mode:horizontal-tb; font-size:38px; letter-spacing:-1px; left:28px; bottom:26px; text-shadow:0 2px 20px #000; }
  .svc3 figcaption small { font-family:var(--disp); color:var(--acc); font-size:16px; margin:0 0 8px 0; display:block; }
  .svc4 { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:10px; }
  .svc4 figure { position:relative; overflow:hidden; }
  .svc4 .big { grid-column:span 2; grid-row:span 2; }
  .svc4 .wide { grid-column:span 2; }
  .svc4 img { width:100%; height:100%; object-fit:cover; display:block; }
  .svc4 figcaption { position:absolute; inset:auto 0 0 0; padding:50px 20px 18px; background:linear-gradient(transparent,rgba(0,0,0,0.9)); font-size:22px; font-weight:800; }
  .svc4 .big figcaption { font-size:36px; letter-spacing:-1px; }
  .svc4 figcaption small { font-family:var(--disp); color:var(--acc); font-size:15px; margin-right:10px; }
  .svc4 .txt { background:var(--acc); padding:26px; display:flex; flex-direction:column; justify-content:space-between; font-weight:800; font-size:22px; line-height:1.3; }
  /* 하위 페이지 공통 */
  .phead { padding:90px 0 50px; border-bottom:1px solid var(--line); }
  .phead .en { font-size:150px; }
  .phead p { font-size:20px; color:var(--sub); margin-top:16px; }
  .chips { display:flex; gap:8px; flex-wrap:wrap; margin:34px 0 0; }
  .chips span, .opts span { border:1px solid var(--sub); border-radius:99px; padding:8px 16px; font-size:15px; font-weight:600; }
  .chips span.on, .opts span.on { background:var(--acc); color:var(--onacc); border-color:var(--acc); }
  .wgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:50px 0 30px; }
  .wgrid figure { position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--card); }
  .wgrid img { width:100%; height:100%; object-fit:cover; display:block; }
  .wgrid figcaption { position:absolute; inset:auto 0 0 0; padding:40px 16px 12px; background:linear-gradient(transparent,rgba(0,0,0,0.88)); font-weight:700; font-size:16px; }
  .wgrid figcaption small { display:block; color:var(--acc); font-size:12px; font-weight:700; letter-spacing:1px; }
  .wgrid .play { position:absolute; right:14px; top:14px; width:34px; height:34px; border:1px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; background:rgba(0,0,0,0.4); }
  .more { text-align:center; padding:10px 0 90px; }
  .strip { background:var(--acc); color:var(--onacc); padding:44px 0; }
  .strip .wrap { display:flex; justify-content:space-between; align-items:center; }
  .strip b { font-size:30px; font-weight:900; letter-spacing:-1px; }
  .strip .btn { background:#fff; color:#000; border-color:#fff; }
  .bigimg { width:100%; height:560px; object-fit:cover; display:block; margin-top:50px; }
  .three { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .three figure { position:relative; height:280px; overflow:hidden; }
  .three img { width:100%; height:100%; object-fit:cover; display:block; }
  .three figcaption { position:absolute; inset:auto 0 0 0; padding:50px 20px 16px; background:linear-gradient(transparent,rgba(0,0,0,0.9)); font-size:22px; font-weight:800; }
  .pts { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }
  .pts div { padding:36px 30px; border-left:1px solid var(--line); }
  .pts div:first-child { border-left:none; }
  .pts .en { font-size:44px; color:var(--acc); display:block; margin-bottom:12px; }
  .pts b { font-size:21px; display:block; } .pts p { color:var(--sub); font-size:15px; margin-top:6px; }
  .cgrid { display:grid; grid-template-columns:1.6fr 1fr; gap:40px; padding:60px 0 100px; }
  .side > div { border:1px solid var(--line); padding:26px; margin-bottom:12px; }
  .side b { font-size:18px; display:block; margin-bottom:6px; } .side p { color:var(--sub); font-size:15px; }
  .side .key { border-color:var(--acc); }
  .frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
  .frow label, .fone label { display:block; font-size:13px; font-weight:700; color:var(--sub); margin:0 0 8px; }
  .fone { margin-top:12px; }
  label em { color:var(--acc); font-style:normal; }
  .gend2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; padding-top:22px; border-top:1px solid var(--line); }
  .gend2 label, .guide .fone label { display:block; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:10px; }
  .gend2 label small, .guide .fone label small { color:var(--acc); font-family:var(--disp); margin-right:10px; font-size:15px; }
  .guide .fone { margin-top:18px; }
  .guide .opts { flex-wrap:nowrap; gap:6px; }
  .guide .opts span { white-space:nowrap; padding:7px 13px; font-size:14px; }
  .guide .grow { grid-template-columns:168px 1fr; gap:14px; }
  .btn { white-space:nowrap; }
  .why { display:block; font-weight:500; font-size:12.5px; color:var(--sub); margin-top:5px; line-height:1.45; }
  .side p.nb { white-space:nowrap; }
  .svc2 img[src$="battery.jpg"] { height:120px !important; object-position:center 25%; }
  /* 클라이언트 로고 띠 */
  .logos { border-bottom:1px solid var(--line); padding:64px 0 44px; overflow:hidden; position:relative; }
  .logos .cap { position:absolute; left:50%; transform:translateX(-50%); top:22px; white-space:nowrap; font-size:11px; letter-spacing:2px; color:var(--sub); }
  .logos .track { display:flex; gap:0; width:max-content; animation:slide 40s linear infinite; align-items:center; }
  .logos .track span { padding-right:70px; font-size:26px; font-weight:800; color:#8a8a84; white-space:nowrap; letter-spacing:-0.5px; }
  .logos::before, .logos::after { content:""; position:absolute; top:0; bottom:0; width:140px; z-index:2; }
  .logos::before { left:0; background:linear-gradient(90deg,#000,transparent); } .logos::after { right:0; background:linear-gradient(270deg,#000,transparent); }
  @keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .logos .track { animation:none; } }
  img[src$="battery.jpg"] { height:126% !important; object-position:center top; }
  .bigimg { height:560px !important; object-position:center 20%; }
  .wgrid figcaption small { color:#8fb0ff; }

  /* ───── 휴대폰 (폭 640 이하) ───── */
  .burger, .mdock { display:none; }
  @media (max-width:640px) {
    .wrap { padding:0 20px; }
    nav .wrap { height:58px; } nav ul, nav .btn { display:none; } .burger { display:block; font-size:24px; line-height:1; }
    .logo { font-size:16px; }
    .heroB .wall { grid-template-columns:repeat(2,1fr); } .heroB .wall img { height:118px !important; } .heroB .wall img:nth-child(n+9) { display:none; }
    .heroB .over { padding-bottom:34px; } .heroB h1 { font-size:38px; letter-spacing:-1.6px; line-height:1.18; } .heroB p { font-size:15px; margin:14px 0 22px; }
    .cta-row { flex-direction:column; align-items:stretch; gap:8px; } .cta-row .btn { text-align:center; }
    .nums .n { padding:22px 10px; } .nums .n:first-child { padding-left:0; } .nums b { font-size:34px; } .nums span { font-size:12px; margin-top:6px; }
    .logos { padding:46px 0 26px; } .logos .cap { font-size:9px; top:16px; } .logos .track span { font-size:17px; padding-right:38px; } .logos::before, .logos::after { width:50px; }
    section { padding:64px 0; } .sec-h { flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:28px; } .sec-h .en { font-size:52px; } .sec-h p { font-size:15px; }
    .works { gap:8px; } .works figure { grid-column:span 12 !important; height:205px !important; } .works .w6, .works .w7 { grid-column:span 6 !important; height:270px !important; }
    .works figcaption { font-size:14px; padding:30px 12px 10px; }
    .svc2 a { grid-template-columns:30px 1fr 86px; padding:16px 0; gap:6px; } .svc2 .no { font-size:16px; } .svc2 h3 { font-size:22px; letter-spacing:-1px; line-height:1.25; }
    .svc2 img, .svc2 img[src$="battery.jpg"] { width:86px; height:56px !important; opacity:0.85; }
    .vs { grid-template-columns:1fr; } .vs > div { padding:24px 20px; } .vs h4 { font-size:19px; margin-bottom:12px; } .vs li { font-size:16px; padding:12px 0; }
    .hybrid { grid-template-columns:1fr; padding:24px 20px; gap:22px; } .hybrid h4 { font-size:25px; } .hybrid p { font-size:15px; }
    .eq { grid-template-columns:1fr 14px 1fr 14px 1fr; gap:4px; } .eq figure { height:92px; } .eq figcaption { font-size:10px; padding:5px 6px; } .eq i { font-size:18px; }
    .final .en { font-size:54px; } .final h2 { font-size:25px; letter-spacing:-0.8px; margin-bottom:22px; }
    .guide { padding:20px 16px; } .guide .ghead { flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:16px; font-size:13px; }
    .guide .grow { grid-template-columns:1fr; gap:10px; padding:14px 0; } .guide .opts { flex-wrap:wrap; } .guide .opts span { font-size:14px; padding:9px 14px; }
    .gend2 { grid-template-columns:1fr; } .fld.tall { height:110px; }
    .guide .fone[style] { flex-direction:column; align-items:stretch !important; gap:14px; } .guide .fone[style] .btn { text-align:center; }
    footer { font-size:12px; padding:30px 0 96px; }
    .phead { padding:44px 0 28px; } .phead .en { font-size:64px !important; } .phead p { font-size:15px; } .chips { margin-top:20px; } .chips span { font-size:13px; padding:7px 12px; }
    .wgrid { grid-template-columns:1fr; padding:26px 0 20px; gap:8px; } .more { padding-bottom:50px; }
    .strip { padding:30px 0; } .strip .wrap { flex-direction:column; align-items:stretch; gap:16px; } .strip b { font-size:21px; } .strip .btn { text-align:center; }
    .bigimg { height:220px !important; margin-top:26px; } .three, .pts { grid-template-columns:1fr; } .three figure { height:190px; } .pts div { border-left:none; border-top:1px solid var(--line); padding:24px 20px; } .pts div:first-child { border-top:none; }
    .cgrid { grid-template-columns:1fr; padding:28px 0 40px; gap:16px; } .side p.nb { white-space:normal; }
    .mdock { display:grid; grid-template-columns:1fr 1.6fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px 14px 14px; background:rgba(0,0,0,0.92); border-top:1px solid var(--line); }
    .mdock a { text-align:center; padding:14px 0; font-weight:800; font-size:15px; border:1px solid var(--ink); }
    .mdock a.pri { background:var(--acc); border-color:var(--acc); color:#fff; }
    body.shot .mdock { position:static; }
  }

/* ═════════ 실제 제작용 추가 (2026-09) ═════════ */
html { scroll-behavior:smooth; }
.skip { position:absolute; left:-999px; } .skip:focus { left:10px; top:10px; z-index:99; background:#fff; color:#000; padding:8px 12px; }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
a.logo, a.logo span { color:var(--acc); } nav ul a.on, nav ul a:hover { color:var(--acc); }
h1.en, h2.en { margin:0; font-weight:var(--dw); }
.ul { text-decoration:underline; font-weight:700; } footer a { text-decoration:underline; }
.btn { cursor:pointer; font-family:inherit; line-height:1.3; transition:filter .18s ease; } .btn:hover { filter:brightness(1.12); } button.btn { border-radius:var(--r); }
.burger { background:none; border:0; color:inherit; cursor:pointer; padding:6px; }
.vs h3 { font-size:24px; font-weight:800; margin-bottom:22px; }
.hybrid h3 { font-size:34px; font-weight:900; letter-spacing:-1px; line-height:1.25; } .hybrid h3 em { font-style:normal; color:var(--acc); }
/* 웍스: 이미지 속 글자 없이 · 영상에 박힌 자막은 아래쪽을 잘라 숨김 */
.works a { position:relative; overflow:hidden; display:block; background:var(--card); }
.works a img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.works a:hover img { transform:scale(1.04); }
.works a.cb img, .wlist .im.cb img, .three .im.cb img, .bigwrap.cb img { height:130% !important; object-position:center top; }
/* 서비스 목록: 마우스를 올린 줄만 파랗게 */
.svc2 a h3, .svc2 a img { transition:color .2s ease, opacity .25s ease; }
.svc2 a:hover h3, .svc2:not(:hover) a:first-child h3 { color:var(--acc); }
.svc2 a:hover img, .svc2:not(:hover) a:first-child img { opacity:1; }
/* 문의 양식 */
.opts label { cursor:pointer; position:relative; display:inline-flex; } .opts input { position:absolute; opacity:0; pointer-events:none; }
.opts input:checked + span { background:var(--acc); color:var(--onacc); border-color:var(--acc); }
.opts input:focus-visible + span { outline:2px solid var(--acc); outline-offset:3px; }
.opts label:hover span { border-color:var(--ink); }
input.fld, textarea.fld { width:100%; background:transparent; color:var(--ink); font:inherit; font-size:16px; border-radius:0; resize:vertical; display:block; }
.fld::placeholder { color:var(--sub); } .fld:focus { border-color:var(--acc); outline:none; }
.hp { position:absolute; left:-9999px; } .err { color:#ff9c9c; margin-top:14px; font-size:14px; }
.fone.send { margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; } .send .after { margin:0; }
.guide .done { text-align:center; padding:50px 0 30px; } .guide .done .ok { width:58px; height:58px; border-radius:50%; background:var(--acc); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; }
.guide .done > b { font-size:24px; display:block; margin-bottom:10px; } .guide .done p { color:var(--sub); } .guide .done .test { color:#ffd84a; font-size:13px; margin-top:16px; }
form.sent > *:not(.done) { display:none; }
/* 분류 버튼 · 작업 목록 */
.chips button, .chips a { border:1px solid var(--sub); border-radius:99px; padding:8px 16px; font-size:15px; font-weight:600; background:none; color:inherit; font-family:inherit; cursor:pointer; }
.chips button.on, .chips button:hover, .chips a:hover { background:var(--acc); color:var(--onacc); border-color:var(--acc); }
.wlist { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 12px; padding:50px 0 90px; }
.wlist figure[hidden] { display:none; } .wlist .im { aspect-ratio:16/9; overflow:hidden; background:var(--card); }
.wlist .im img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .wlist figure:hover .im img { transform:scale(1.04); }
.wlist figcaption { padding:12px 2px 0; font-weight:700; font-size:16px; } .wlist figcaption small { display:block; color:#8fb0ff; font-size:12px; letter-spacing:1px; margin-bottom:2px; }
/* 서비스 · 캐릭터 · FAQ */
.sec-h p b.ko { color:var(--ink); font-size:20px; }
.bigwrap { height:560px; overflow:hidden; margin-bottom:12px; } .bigwrap img { width:100%; height:100%; object-fit:cover; display:block; }
.three { margin-bottom:12px; } .three .im { height:100%; overflow:hidden; }
.cgal { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .cgal figure { background:var(--card); } .cgal img { width:100%; height:440px; object-fit:cover; display:block; } .cgal figcaption { padding:14px 16px; font-weight:700; }
.faqlist { padding:30px 0 90px; } .faqlist details { border-bottom:1px solid var(--line); padding:24px 0; }
.faqlist summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; } .faqlist summary::-webkit-details-marker { display:none; }
.faqlist summary h2 { font-size:21px; font-weight:800; letter-spacing:-0.5px; } .faqlist summary::after { content:"+"; color:var(--acc); font-size:30px; line-height:1; } .faqlist details[open] summary::after { content:"–"; }
.faqlist details p { color:var(--sub); margin-top:14px; max-width:860px; font-size:17px; }
.mdock a { text-decoration:none; color:inherit; }
@media (max-width:640px) {
  nav ul.open { display:flex; position:fixed; inset:58px 0 0 0; background:#000; flex-direction:column; padding:34px 20px; gap:24px; font-size:36px; z-index:30; }
  .works a { grid-column:span 12 !important; height:205px !important; } .works .w4, .works .w5, .works .w7 { display:none; } .works a.w6 { grid-column:span 12 !important; height:300px !important; }
  .guide .fone.send { flex-direction:column; align-items:stretch; gap:14px; } .guide .fone.send .btn { text-align:center; }
  .wlist { grid-template-columns:1fr; padding:26px 0 50px; gap:22px; }
  .bigwrap { height:220px; } .cgal { grid-template-columns:1fr 1fr; gap:8px; } .cgal img { height:230px; } .cgal figcaption { font-size:13px; padding:10px; }
  .faqlist summary h2 { font-size:17px; } .faqlist details p { font-size:15px; } .hybrid h3 { font-size:25px; } .vs h3 { font-size:19px; margin-bottom:12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

.cta-note b, .hl24 { color:var(--ink); font-weight:700; }
@media (max-width:640px) { .cta-note { margin:6px 0 0; text-align:center; } }