:root { --bg:#fbfaf7; --ink:#23262f; --muted:#666a75; --main:#3f4d7a; --accent:#c4776f; --sand:#efe3c8; --soft:#f1f0ec; --sage:#d6e0d0; --rose:#f2dfdb; --line:#dcdad3; }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body { background:var(--bg); color:var(--ink); font-family:Pretendard, system-ui, sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 24px; }

  nav { position:sticky; top:0; z-index:20; background:rgba(251,250,247,.9); backdrop-filter:blur(10px); }
  nav .wrap { display:flex; justify-content:space-between; align-items:center; height:76px; }
  .logo { font-weight:900; font-size:22px; display:flex; align-items:center; gap:8px; }
  .logo i { width:32px; height:32px; border-radius:10px; background:var(--main); color:#fff; display:grid; place-items:center; font-style:normal; font-size:18px; }
  .menu { display:flex; gap:32px; font-weight:500; font-size:15px; }
  .menu a { padding:6px 2px; border-bottom:2px solid transparent; }
  .menu a:hover { color:var(--main); }
  .menu a.on { font-weight:800; border-bottom-color:var(--ink); }
  .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:14px; font-weight:700; font-size:15px; transition:.2s; border:2px solid var(--ink); }
  .btn-v { background:var(--main); color:#fff; box-shadow:3px 3px 0 var(--ink); }
  .btn-w { background:#fff; box-shadow:3px 3px 0 var(--ink); }
  .btn-v:hover, .btn-w:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }

  /* 첫 화면 */
  .hero { padding:48px 0 96px; }
  .hero-box { background:var(--soft); border:2px solid var(--ink); border-radius:32px; padding:80px 56px; position:relative; overflow:hidden; }
  .at { position:absolute; right:-40px; bottom:-120px; font-size:460px; font-weight:900; line-height:1; color:var(--main); opacity:.07; pointer-events:none; }
  .tag { display:inline-block; background:var(--sand); border:2px solid var(--ink); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; transform:rotate(-2deg); }
  h1 { font-size:clamp(38px,6.4vw,80px); line-height:1.1; letter-spacing:-.045em; font-weight:900; margin:24px 0; position:relative; }
  h1 .hl { background:var(--accent); color:#fff; padding:0 14px; border-radius:14px; display:inline-block; transform:rotate(-1.5deg); }
  .hero p { font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:560px; margin-bottom:36px; position:relative; }
  .cta { display:flex; gap:14px; flex-wrap:wrap; position:relative; }
  .hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; position:relative; }

  /* 휴대폰 목업 */
  .phone-wrap { position:relative; display:flex; justify-content:center; }
  .phone { width:290px; background:#fff; border:2px solid var(--ink); border-radius:40px; padding:14px 14px 20px; box-shadow:6px 6px 0 var(--ink); transform:rotate(2deg); }
  .phone .bar { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; padding:2px 10px 10px; }
  .phone .notch { width:84px; height:22px; background:var(--ink); border-radius:999px; }
  .phone .feed-head { text-align:center; font-weight:900; font-size:20px; padding:4px 0 10px; border-bottom:1px solid var(--line); }
  .post { display:grid; grid-template-columns:34px 1fr; gap:10px; padding:14px 6px; border-bottom:1px solid var(--line); text-align:left; }
  .post:last-child { border-bottom:none; }
  .post .av { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--ink); background:var(--sand); display:grid; place-items:center; font-size:13px; font-weight:900; color:var(--main); }
  .post .who { font-size:13px; font-weight:800; }
  .post .who span { color:var(--muted); font-weight:400; }
  .post p { font-size:13.5px; line-height:1.5; margin:3px 0 8px; color:var(--ink); }
  .post .acts { display:flex; gap:14px; font-size:12px; color:var(--muted); }
  .post .acts b { color:var(--accent); }
  .float { position:absolute; background:#fff; border:2px solid var(--ink); border-radius:14px; padding:10px 14px; font-size:13px; font-weight:700; box-shadow:3px 3px 0 var(--ink); white-space:nowrap; }
  .float small { display:block; font-size:11px; color:var(--muted); font-weight:600; }
  .float.f1 { top:40px; left:-14px; background:var(--sage); transform:rotate(-4deg); }
  .float.f2 { bottom:48px; right:-10px; background:var(--rose); transform:rotate(3deg); }

  .marquee { background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap; padding:18px 0; font-weight:800; font-size:20px; }
  .marquee div { display:inline-block; animation:slide 30s linear infinite; }
  .marquee span { margin:0 28px; }
  .marquee span:nth-child(odd) { color:var(--sand); }
  @keyframes slide { to { transform:translateX(-50%); } }

  section { padding:110px 0; }
  section + section { padding-top:0; }
  .label { font-weight:800; color:var(--main); font-size:14px; letter-spacing:.04em; }
  h2 { font-size:clamp(30px,4.4vw,52px); letter-spacing:-.04em; line-height:1.18; margin:10px 0 48px; font-weight:900; }

  /* 이런 대표님께 */
  .fit { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  .fit li { list-style:none; display:flex; gap:14px; align-items:flex-start; background:#fff; border:2px solid var(--ink); border-radius:18px; padding:22px 24px; font-size:17px; font-weight:600; }
  .fit li::before { content:"✓"; flex:none; width:28px; height:28px; border-radius:8px; background:var(--sage); border:1.5px solid var(--ink); display:grid; place-items:center; font-size:15px; font-weight:900; }

  /* 왜 스레드 */
  .why { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .why div { border-top:2px solid var(--ink); padding-top:24px; }
  .why b { display:block; font-size:15px; color:var(--accent); margin-bottom:10px; }
  .why h3 { font-size:22px; letter-spacing:-.02em; margin-bottom:10px; }
  .why p { color:var(--muted); }

  /* 서비스 */
  .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .card { background:#fff; border:2px solid var(--ink); border-radius:24px; padding:28px; box-shadow:4px 4px 0 var(--ink); transition:.2s; }
  .card:hover { transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink); }
  .card .ic { width:52px; height:52px; border-radius:14px; border:2px solid var(--ink); display:grid; place-items:center; font-size:24px; margin-bottom:22px; }
  .card h3 { font-size:20px; letter-spacing:-.02em; margin-bottom:8px; }
  .card p { color:var(--muted); font-size:15px; }

  /* 리포트 샘플 */
  .report-wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; }
  .report-wrap h2 { margin-bottom:24px; }
  .report-list { list-style:none; display:grid; gap:14px; }
  .report-list li { display:flex; gap:12px; font-weight:600; }
  .report-list li span { flex:none; width:26px; height:26px; border-radius:8px; background:var(--main); color:#fff; display:grid; place-items:center; font-size:13px; }
  .report-list li small { display:block; font-weight:400; color:var(--muted); font-size:14px; }
  .report-shot { margin:0; }
  .report-shot img { width:100%; display:block; border:2px solid var(--ink); border-radius:20px; box-shadow:6px 6px 0 var(--ink); background:#f2f2f2; }
  .report-shot figcaption { margin-top:14px; font-size:13px; color:var(--muted); }

  /* 숫자 (공란) */
  .results { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .note { margin-top:16px; font-size:13px; color:var(--muted); }
  .res { border-radius:24px; padding:32px 28px; border:2px solid var(--ink); }
  .res b { display:block; font-size:clamp(34px,4vw,48px); font-weight:900; letter-spacing:-.04em; line-height:1.2; }
  .res b:empty { height:58px; width:70%; border:2px dashed rgba(35,38,47,.35); border-radius:12px; }
  .res strong { display:block; font-size:16px; margin:12px 0 2px; }
  .res span { font-size:14px; color:var(--muted); }

  .industries { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; align-items:center; }
  .industries em { font-style:normal; font-weight:700; margin-right:6px; }
  .industries span { border:1.5px solid var(--ink); border-radius:999px; padding:6px 16px; font-size:14px; font-weight:600; background:#fff; }

  /* 진행 과정 */
  .steps { border-top:2px solid var(--ink); }
  .step { display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:center; padding:30px 0; border-bottom:1px solid var(--line); }
  .step .n { font-weight:900; color:var(--main); font-size:15px; }
  .step h3 { font-size:21px; letter-spacing:-.02em; }
  .step p { color:var(--muted); font-size:15px; }
  .pill { background:var(--sage); border:1.5px solid var(--ink); border-radius:999px; padding:6px 16px; font-size:14px; font-weight:700; white-space:nowrap; }
  .pill.you { background:var(--rose); }

  /* 포트폴리오 안내 띠 */
  .band { display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; background:var(--sand); border:2px solid var(--ink); border-radius:28px; padding:44px 48px; }
  .band h3 { font-size:clamp(22px,2.6vw,30px); letter-spacing:-.03em; line-height:1.3; }
  .band p { color:var(--muted); margin-top:8px; }

  /* 자주 묻는 질문 */
  .faq { border-top:2px solid var(--ink); }
  details { border-bottom:1px solid var(--line); }
  summary { list-style:none; cursor:pointer; padding:24px 0; font-size:18px; font-weight:700; display:flex; justify-content:space-between; gap:16px; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:"+"; font-size:24px; line-height:1; color:var(--main); transition:.2s; }
  details[open] summary::after { transform:rotate(45deg); }
  details p { color:var(--muted); padding:0 0 24px; max-width:760px; }

  /* 문의 */
  .contact { background:var(--main); color:#fff; border:2px solid var(--ink); border-radius:32px; padding:64px 56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; box-shadow:5px 5px 0 var(--ink); }
  .contact .label { color:var(--sand); }
  .contact h2 { margin-bottom:16px; }
  .contact p { opacity:.85; }
  form { background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:24px; padding:28px; display:grid; gap:12px; }
  input, select, textarea { width:100%; border:1.5px solid var(--line); border-radius:12px; padding:14px; font:inherit; font-size:15px; background:#fff; color:var(--ink); }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--main); }
  textarea { min-height:100px; resize:vertical; }
  .check { display:flex; gap:10px; align-items:center; font-size:15px; font-weight:600; padding:4px 2px; cursor:pointer; }
  .check input { width:18px; height:18px; accent-color:var(--main); }
  form .btn { justify-content:center; cursor:pointer; font:inherit; font-weight:800; }

  /* 페이지 끝 상담 유도 */
  .cta-end { background:var(--main); color:#fff; border:2px solid var(--ink); border-radius:32px; padding:64px 56px; box-shadow:5px 5px 0 var(--ink); text-align:center; }
  .cta-end .label { color:var(--sand); }
  .cta-end h2 { margin-bottom:14px; }
  .cta-end p { opacity:.85; margin-bottom:28px; }

  /* 서브 페이지 머리 */
  .page-head { padding:56px 0 64px; }
  .page-head h1 { font-size:clamp(34px,5.4vw,64px); margin:14px 0 16px; }
  .page-head p { color:var(--muted); font-size:18px; max-width:600px; }

  /* 사례 */
  .case-list { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  .case { background:#fff; border:2px solid var(--ink); border-radius:24px; padding:28px; box-shadow:4px 4px 0 var(--ink); display:flex; flex-direction:column; gap:18px; }
  .case-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .ind { display:inline-block; font-size:13px; font-weight:700; padding:4px 12px; border-radius:999px; border:1.5px solid var(--ink); }
  .case h3 { font-size:22px; letter-spacing:-.02em; line-height:1.35; }
  .case dl { display:grid; grid-template-columns:64px 1fr; gap:8px 12px; font-size:15px; }
  .case dt { font-weight:800; color:var(--main); }
  .case dd { color:var(--muted); }
  .case-nums { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .case-nums div { background:var(--soft); border-radius:14px; padding:14px; }
  .case-nums b { display:block; font-size:24px; font-weight:900; letter-spacing:-.03em; }
  .case-nums b:empty { height:32px; width:70%; border:2px dashed rgba(35,38,47,.3); border-radius:8px; }
  .case-nums small { font-size:13px; color:var(--muted); }
  .shot { border:2px dashed rgba(35,38,47,.3); border-radius:14px; min-height:120px; display:grid; place-items:center; font-size:13px; color:var(--muted); background:var(--bg); text-align:center; padding:12px; }
  .shot img { width:100%; border-radius:10px; display:block; }
  .shot:has(img) { border:1.5px solid var(--line); padding:0; min-height:0; background:#fff; overflow:hidden; }
  .case blockquote { border-left:3px solid var(--accent); padding-left:14px; font-weight:600; }
  .case blockquote small { display:block; font-weight:400; color:var(--muted); font-size:13px; margin-top:4px; }

  /* 카톡 후기 */
  .chats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .chat { display:flex; flex-direction:column; gap:12px; margin:0; }
  .chat img { width:100%; border:2px solid var(--ink); border-radius:18px; display:block; background:#b7c7d8; }
  .chat figcaption { font-size:15px; font-weight:700; }
  .chat figcaption::before { content:"› "; color:var(--main); }
  .posts { margin-top:56px; }
  .posts h3, .private h3 { font-size:24px; letter-spacing:-.02em; margin-bottom:18px; }
  .post-shots { display:grid; grid-template-columns:1fr; gap:14px; max-width:760px; }
  .post-shots img { width:100%; border:2px solid var(--ink); border-radius:14px; display:block; background:#fff; }
  .private { margin-top:56px; background:var(--soft); border:2px solid var(--ink); border-radius:28px; padding:40px 44px; display:grid; grid-template-columns:1.4fr 1fr; gap:24px 40px; align-items:center; }
  .private h3 { margin:8px 0 10px; }
  .private p { color:var(--muted); }
  .private-nums { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .private-nums div { background:#fff; border:2px solid var(--ink); border-radius:16px; padding:18px; }
  .private-nums b { display:block; font-size:32px; font-weight:900; letter-spacing:-.03em; }
  .private-nums b:empty { height:40px; width:70%; border:2px dashed rgba(35,38,47,.3); border-radius:8px; }
  .private-nums small { font-size:13px; color:var(--muted); font-weight:600; }
  .private-tags { display:flex; flex-wrap:wrap; gap:8px; }
  .private-tags span { border:1.5px solid var(--ink); border-radius:999px; padding:5px 14px; font-size:13px; font-weight:600; background:#fff; }
  .private-tags span:last-child { border-style:dashed; color:var(--muted); }
  .private .btn { justify-self:end; }
  .chat-note { margin-top:20px; font-size:13px; color:var(--muted); }

  footer { padding:48px 0; font-size:13px; color:var(--muted); }
  footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  footer strong { color:var(--ink); font-size:15px; display:block; margin-bottom:6px; }

  @media (max-width:960px) {
    .cards { grid-template-columns:1fr 1fr; }
    .chats { grid-template-columns:1fr 1fr; }
    .hero-grid, .report-wrap { grid-template-columns:1fr; }
    .phone-wrap { margin-top:16px; }
    .why { grid-template-columns:1fr; gap:28px; }
  }
  @media (max-width:760px) {
    .wrap { padding:0 16px; }
    nav .btn { padding:10px 16px; }
    .hero-box { padding:48px 24px; border-radius:24px; }
    .at { font-size:300px; }
    section { padding:80px 0; }
    .fit { grid-template-columns:1fr; }
    .cards { grid-template-columns:1fr; }
    .results { grid-template-columns:1fr; gap:12px; }
    .res { padding:22px 18px; }
    .step { grid-template-columns:1fr; gap:6px; }
    .step .pill { justify-self:start; margin-top:8px; }
    .band, .contact, .cta-end { padding:36px 20px; }
    nav .wrap { flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:10px; row-gap:6px; }
    .menu { display:flex; order:3; width:100%; gap:22px; font-size:14px; }
    .case-list, .chats, .post-shots { grid-template-columns:1fr; }
    .private { grid-template-columns:1fr; padding:28px 20px; }
    .private .btn { justify-self:start; }
    .float.f1 { left:0; }
    .float.f2 { right:0; }
    .contact { grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce) { .marquee div { animation:none; } html { scroll-behavior:auto; } }