/* 코드앤블록 에이전시 소개 — /test/company/ 전용 스타일
   색 토큰·헤더·푸터·버튼(.btn)·.wrap·.reveal 은 /test/css/home.css 를 그대로 쓴다.
   이 파일에는 이 페이지에만 있는 블록(히어로·프로젝트 카드·연락처)만 담는다. */

  /* ── 아주 큰 타이틀 글꼴 — KIMM(한국기계연구원체, 눈누 배포본) ──────
     히어로 h1 · 섹션 h2 · 연락처 h2 에만 쓴다. 본문·카드 제목은 기존 Wanted Sans 그대로.
     쓰는 굵기가 700 뿐이라 실제로 받는 파일은 KIMM_Bold.woff2 하나다. */
  @font-face{
    font-family:'KoreaInstituteOfMachineryAndMaterials';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Light.woff2') format('woff2');
    font-weight:300;
    font-display:swap;
  }
  @font-face{
    font-family:'KoreaInstituteOfMachineryAndMaterials';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
  }
  .ag-hero h1,.shead h2,.ag-contact h2{
    font-family:'KoreaInstituteOfMachineryAndMaterials',var(--font);
    font-weight:700;
    letter-spacing:-0.01em;
  }

  /* ── 히어로 ─────────────────────────────────────────── */
  .ag-hero{position:relative;overflow:hidden;padding:104px 0 84px;background:linear-gradient(180deg,#f5f8ff,#fff 64%);}
  .ag-hero .wrap{position:relative;z-index:1;max-width:1100px;}
  .ag-hero h1{font-size:46px;font-weight:700;letter-spacing:-0.018em;line-height:1.3;color:var(--ink);}
  .ag-hero p.lead{margin-top:24px;font-size:18px;color:var(--gray);letter-spacing:-0.01em;line-height:1.65;max-width:620px;}
  /* 한글은 단어 중간에서 끊지 않는다 — 좁은 화면에서 「바탕으로」가 「바탕 / 으로」로 쪼개지던 것. */
  .ag-hero h1,.ag-hero p.lead,.pj h3,.pj p,.ag-contact h2,.ag-contact dd{word-break:keep-all;overflow-wrap:break-word;}
  .ag-hero .ag-stats{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;}
  .ag-hero .ag-stats li{list-style:none;display:inline-flex;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;gap:0;
    font-size:14px;font-weight:500;color:var(--gray);letter-spacing:-0.01em;box-shadow:0 2px 10px -6px rgba(24,24,27,.22);}
  .ag-hero .ag-stats b{color:var(--ink);font-weight:700;}

  /* ── 프로젝트 그리드 ─────────────────────────────────── */
  .pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;}
  .pj{display:flex;flex-direction:column;}
  .pj-thumb{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:407/263;
    background:var(--soft2);border:1px solid var(--line);}
  .pj-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
  .pj:hover .pj-thumb img{transform:scale(1.04);}


  .pj-tags{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px;}
  .pj-tags li{list-style:none;font-size:12px;font-weight:500;letter-spacing:-0.005em;
    color:var(--gray2);background:var(--soft2);border-radius:var(--r-sm);padding:4px 9px;}
  .pj h3{margin-top:14px;font-size:21px;font-weight:700;letter-spacing:-0.02em;line-height:1.35;color:var(--ink);}
  .pj h3 .yr{margin-left:8px;font-size:14px;font-weight:500;color:var(--gray3);letter-spacing:0;}
  .pj .en{margin-top:5px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--gray3);text-transform:uppercase;}
  .pj p{margin-top:12px;font-size:15px;color:var(--gray);letter-spacing:-0.01em;line-height:1.66;}
  .pj p + p{margin-top:10px;}

  /* ── 연락처 ─────────────────────────────────────────── */
  .ag-contact{padding:0 0 120px;}
  .ag-contact .box{background:var(--dark);border-radius:28px;padding:72px 56px;color:#fff;position:relative;overflow:hidden;}
  .ag-contact .box::after{content:"";position:absolute;width:520px;height:520px;pointer-events:none;
    background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);top:-230px;right:-150px;}
  .ag-contact h2{font-size:38px;font-weight:700;letter-spacing:-0.025em;line-height:1.34;position:relative;}
  .ag-contact dl{margin-top:40px;position:relative;display:grid;grid-template-columns:repeat(3,auto);
    justify-content:start;gap:14px 64px;}
  .ag-contact dt{font-size:13px;font-weight:600;letter-spacing:.06em;color:#71717A;text-transform:uppercase;}
  .ag-contact dd{margin-top:7px;font-size:17px;font-weight:500;letter-spacing:-0.01em;color:#fff;line-height:1.55;}
  .ag-contact dd a{border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px;transition:border-color .18s;}
  .ag-contact dd a:hover{border-color:#fff;}
  .ag-contact .actions{margin-top:44px;position:relative;display:flex;gap:11px;flex-wrap:wrap;}
  .ag-contact .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.24);}
  .ag-contact .btn-outline:hover{border-color:#fff;box-shadow:none;}

  /* ── 반응형 ─────────────────────────────────────────── */
  @media(max-width:1000px){
    .ag-hero h1{font-size:40px;}
    .pj-grid{grid-template-columns:repeat(2,1fr);gap:32px 22px;}
  }
  @media(max-width:960px){
    .ag-contact h2{font-size:32px;}
    .ag-contact .box{padding:56px 36px;}
    .ag-contact dl{grid-template-columns:repeat(2,auto);gap:18px 48px;}
  }
  @media(max-width:640px){
    .ag-hero{padding:72px 0 56px;}
    .ag-hero h1{font-size:28px;}
    .ag-hero p.lead{margin-top:18px;font-size:16px;}
    .ag-hero .ag-stats{margin-top:28px;gap:8px;}
    .ag-hero .ag-stats li{font-size:13px;padding:8px 13px;}
    .pj-grid{grid-template-columns:1fr;gap:38px;}
    .pj h3{font-size:19px;}
    .ag-contact{padding-bottom:80px;}
    .ag-contact .box{padding:44px 24px;border-radius:22px;}
    .ag-contact h2{font-size:24px;}
    .ag-contact dl{grid-template-columns:1fr;gap:16px;margin-top:32px;}
    .ag-contact dd{font-size:16px;}
    .ag-contact .actions{margin-top:34px;}
  }
  /* ── 움직임 ─────────────────────────────────────────────
     결제슉 홈과 같은 말투를 쓴다 — 맨 위 문구는 줄 단위로 아래에서 올라오고,
     그 아래는 스크롤에 맞춰 한 번씩 떠오른다. 짧게, 한 번만, 되돌아오지 않게. */

  /* 맨 위 문구: 줄마다 가림막(.lm) 안에서 밀려 올라온다 */
  .ag-hero h1 .lm{display:block;overflow:hidden;padding-bottom:.06em;}
  .ag-hero h1 .l{display:block;transform:translateY(105%);
    animation:agLineUp .82s cubic-bezier(.22,.7,.16,1) both;}
  .ag-hero h1 .l1{animation-delay:.10s;}
  .ag-hero h1 .l2{animation-delay:.22s;}
  .ag-hero p.lead{animation:agRise .7s cubic-bezier(.2,.7,.2,1) .46s both;}
  .ag-hero .ag-stats li{animation:agRise .6s cubic-bezier(.2,.7,.2,1) both;}
  .ag-hero .ag-stats li:nth-child(1){animation-delay:.58s;}
  .ag-hero .ag-stats li:nth-child(2){animation-delay:.66s;}
  @keyframes agLineUp{from{transform:translateY(105%);} to{transform:translateY(0);}}
  @keyframes agRise{from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;}}

  /* 카드는 한 줄이 통째로 뜨지 않고 왼쪽부터 차례로 — 지연은 등장(.in)에만 건다.
     .pj 자체의 transition 을 건드리면 home.css 의 .reveal 이 덮이므로 손대지 않는다. */
  .pj-grid .pj.in:nth-child(3n+2){transition-delay:.08s;}
  .pj-grid .pj.in:nth-child(3n+3){transition-delay:.16s;}

  /* 올려놓으면 그림만 살짝 떠오르고 테두리가 밝아진다 (확대는 위에 이미 있다) */
  .pj-thumb{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease;}
  .pj:hover .pj-thumb{transform:translateY(-6px);border-color:rgba(255,255,255,.22);}

  @media(prefers-reduced-motion:reduce){
    .pj-thumb img,.pj-thumb{transition:none;}
    .pj:hover .pj-thumb img,.pj:hover .pj-thumb{transform:none;}
    .ag-hero h1 .l,.ag-hero p.lead,.ag-hero .ag-stats li{animation:none;transform:none;opacity:1;}
    .pj-grid .pj.in:nth-child(3n+2),.pj-grid .pj.in:nth-child(3n+3){transition-delay:0s;}
  }

  /* ── 어두운 테마 ────────────────────────────────────────
     이 파일은 /test/company/ 에서만 불린다. home.css 의 색 토큰을 여기서만
     어둡게 다시 정의하고, 토큰을 안 쓰고 흰색이 박힌 자리만 따로 덮는다. */
  html{background:#0B0B0D;}
  body{
    --ink:#FFFFFF; --ink2:#E9E9EC; --gray:#A1A1AA; --gray2:#8B8B93; --gray3:#6E6E77;
    --line:#26262B; --line2:#34343C;
    --bg:#0B0B0D; --soft:#0E0E11; --soft2:#17171B;
    --shadow:0 20px 48px -22px rgba(0,0,0,.72);
  }
  /* 흰색이 박혀 있던 자리 */
  header{background:rgba(11,11,13,.78);}
  .btn-outline{background:transparent;color:var(--ink2);}
  .btn-outline:hover{box-shadow:none;}
  /* 로고 두 개가 검은 글자라 어두운 배경에서 사라진다 — 단색이라 반전으로 흰 글자가 된다 */
  .logo img,.fbrand{filter:invert(1);}

  .ag-hero{background:linear-gradient(180deg,#101728,#0B0B0D 64%);}
  .ag-hero .ag-stats li{background:#15151A;border-color:var(--line);box-shadow:none;}

  .pj-thumb{background:var(--soft2);}

  /* 연락처 상자도 배경과 같은 검정이라 경계가 사라진다 */
  .ag-contact .box{background:#15151A;border:1px solid var(--line);}
  .ag-contact dt{color:#8B8B93;}

  /* ── 플로팅 버튼 ────────────────────────────────────────
     마크업·크기·움직임은 home.css 의 .agency-fab 을 그대로 쓰고,
     검은 바탕에서는 묻히므로 색만 뒤집는다(흰 바탕 + 검은 글자). */
  .agency-fab{background:#FFFFFF;color:#0B0B0D;box-shadow:0 18px 40px -14px rgba(0,0,0,.75);}
  .agency-fab .af-ar{background:rgba(11,11,13,.10);}
  .agency-fab:hover{background:#F2F2F4;box-shadow:0 24px 52px -16px rgba(0,0,0,.8);}
  .agency-fab:hover .af-ar{background:var(--accent);color:#fff;}
  /* 이 페이지에는 카카오 채팅 버튼이 없어 그만큼 띄울 필요가 없다 */
  @media(max-width:640px){
    .agency-fab{bottom:16px;}
  }