:root{
    --paper:#F5F4F0; --card:#FFFFFF; --ink:#1B1C1E; --soft:#6B6B66; --faint:#9B9A94;
    --line:#E5E3DC; --line2:#EEEDE7;
    --green:#0E7B62; --greenT:#E9F5F1;
    --blue:#3B5BDB; --blueT:#EDEFFC;
    --teal:#12B39A; --tealT:#E3F5F1;
    --amber:#C77C1A; --amberT:#FAEFD9;
    --coral:#E24A28; --coralT:#FCEAE4;
    --navy:#3A3F55; --navyT:#EBECF2;
    --cobalt:#3D53E8; --cobaltT:#EDEAFA; /* Planning · 밴드 틴트는 Sliding blueT 와 갈리도록 바이올렛 쪽으로 */
    --rose:#E8506E; --roseT:#FBE9F0; /* Giting · 시간대 4색 중 저녁 로즈 (낮 오렌지는 coral 과 hue 1° 차라 제외) */
    --sky:#1288B0; --skyT:#E3F1F7; /* Datgi · 앱 자체 액센트는 코랄(#F26B4E)이지만 Working coral 과 hue 가 같아 못 쓴다. 지도의 바다 쪽으로 뺀다 */
    --graphite:#4A4C52; --graphiteT:#EDEDF0; /* Bajjak · 이 제품은 색을 안 쓴다(초과를 반전으로 말한다). 무채색이 곧 정체성 */
    --salmon:#F2555B; --salmonT:#FFECEC; /* Ttobom · 제품 자기 액센트(hue 358°). ⚠️ 따뜻한 쪽이 붐빈다 — rose 348°·coral 13° 와 가깝다. 바로 위가 무채색 Bajjak 이라 인접 대비는 확보됨 */
    --disp:"Hanken Grotesk",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--disp);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 30px}
  .k{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
  .dots{display:inline-flex;gap:4px;align-items:center}
  .dots i{width:8px;height:8px;border-radius:50%;display:block}
  /* 점 색은 .dots 안에서만 — 맨몸 클래스로 두면 같은 이름을 쓰는 다른 요소
     (예: 캐스트의 "m dg")에 배경이 통째로 깔린다. 실제로 그랬다. */
  .dots .dg{background:var(--green)}.dots .db{background:var(--blue)}.dots .dt{background:var(--teal)}.dots .da{background:var(--amber)}.dots .dc{background:var(--coral)}.dots .dn{background:var(--navy)}.dots .dr{background:var(--rose)}.dots .dp{background:var(--cobalt)}

  header{position:sticky;top:0;z-index:30;background:rgba(245,244,240,.85);backdrop-filter:blur(9px) saturate(1.3);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:62px}
  .mark{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.01em;white-space:nowrap;flex-shrink:0}
  nav.n{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  nav.n a{font-family:var(--mono);font-size:12.5px;color:var(--soft)}
  nav.n a:hover{color:var(--ink)}
  .lang{font-family:var(--mono);font-size:12px;border:1px solid var(--line);background:var(--card);color:var(--soft);padding:5px 9px;border-radius:6px;cursor:pointer}
  .lang:hover{color:var(--ink);border-color:var(--ink)}
  @media(max-width:720px){nav.n a.hs{display:none}}

  /* hero */
  .hero{text-align:center;padding:56px 0 54px}
  .cast{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:18px 20px;margin-bottom:30px}
  .cast .m{position:relative}
  .cast img,.cast svg{height:96px;width:auto;display:block;filter:drop-shadow(0 12px 18px rgba(27,28,30,.12))}
  .cast .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;margin-top:8px;color:var(--faint)}
  .cast .m.d .tag{color:var(--green)}.cast .m.s .tag{color:var(--blue)}.cast .m.c .tag{color:var(--teal)}.cast .m.l .tag{color:var(--amber)}.cast .m.w .tag{color:var(--coral)}.cast .m.g .tag{color:var(--navy)}.cast .m.gt .tag{color:var(--rose)}.cast .m.p .tag{color:var(--cobalt)}
  @media(max-width:560px){.cast{gap:14px 10px;flex-wrap:wrap}.cast img,.cast svg{height:66px}}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--soft);margin-bottom:16px}
  .eyebrow .pr{color:var(--ink)}
  h1{font-weight:800;font-size:clamp(34px,5.6vw,60px);line-height:1.02;letter-spacing:-.025em;margin:0 auto;max-width:15ch;text-wrap:balance}
  h1 .g{color:var(--green)}h1 .b{color:var(--blue)}h1 .t{color:var(--teal)}
  h1,.sub,.ptag,.pinfo p,.cols p,.contact .ch,.contact .cp,.v .vt,.dcard .txt,.bookcard .txt{word-break:keep-all}
  .sub{max-width:56ch;margin:20px auto 0;color:var(--soft);font-size:clamp(16px,2vw,19px)}
  .sub b{color:var(--ink);font-weight:600}
  .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:11px;margin-top:26px}
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;padding:12px 20px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);transition:transform .12s}
  .btn:hover{transform:translateY(-1px)}
  .btn.g{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn.g:hover{border-color:var(--ink)}
  .micro{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:22px;letter-spacing:.02em}

  /* product bands */
  .band{border-top:1px solid var(--line);padding:64px 0}
  .band.d{background:linear-gradient(180deg,var(--greenT),transparent 70%)}
  .band.s{background:linear-gradient(180deg,var(--blueT),transparent 70%)}
  .band.c{background:linear-gradient(180deg,var(--tealT),transparent 70%)}
  .band.l{background:linear-gradient(180deg,var(--amberT),transparent 70%)}
  .band.w{background:linear-gradient(180deg,var(--coralT),transparent 70%)}
  .band.g{background:linear-gradient(180deg,var(--navyT),transparent 70%)}
  .band.gt{background:linear-gradient(180deg,var(--roseT),transparent 70%)}
  .band.dg{background:linear-gradient(180deg,var(--skyT),transparent 70%)}
  .band.bj{background:linear-gradient(180deg,var(--graphiteT),transparent 70%)}
  .band.tb{background:linear-gradient(180deg,var(--salmonT),transparent 70%)}
  .band.p{background:linear-gradient(180deg,var(--cobaltT),transparent 70%)}
  .prow{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
  /* 짝수 밴드(Sliding·Lighting·Grouping·Planning) 좌우 반전 — info 우측·visual 좌측(데스크톱만). 홀수(Drafting·Coxpit·Working)는 기본 info 좌측 → 번갈아 */
  @media(min-width:861px){
    .band.s .prow,.band.l .prow,.band.g .prow,.band.p .prow{grid-template-columns:1.15fr .85fr}
    .band.s .pinfo,.band.l .pinfo,.band.g .pinfo,.band.p .pinfo{grid-column:2;grid-row:1}
    .band.s .frame,.band.l .frame,.band.g .frame,.band.p .frame{grid-column:1;grid-row:1}
  }
  @media(max-width:860px){.prow{grid-template-columns:1fr;gap:26px}}
  .pinfo .top{display:flex;align-items:center;gap:14px}
  .pinfo .top img,.pinfo .top svg{height:56px;width:auto}
  .pname{font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1}
  .d .pname{color:var(--green)}.s .pname{color:var(--blue)}.c .pname{color:var(--teal)}.l .pname{color:var(--amber)}.w .pname{color:var(--coral)}.gt .pname{color:var(--rose)}.p .pname{color:var(--cobalt)}
  .code{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--faint)}
  .ptag{font-weight:700;font-size:clamp(19px,2.4vw,24px);letter-spacing:-.01em;margin:16px 0 8px}
  .pinfo p{color:var(--soft);margin:0 0 18px;max-width:42ch}
  .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
  .chip .lv{width:7px;height:7px;border-radius:50%}
  .d .chip .lv{background:var(--green)}.s .chip .lv{background:var(--blue)}.c .chip .lv{background:var(--teal)}.l .chip .lv{background:var(--amber)}.w .chip .lv{background:var(--coral)}.gt .chip .lv{background:var(--rose)}.p .chip .lv{background:var(--cobalt)}
  .chip.soon{border-style:dashed}.chip.soon .lv{box-shadow:0 0 0 3px var(--amberT)}
  .plinks{display:flex;gap:16px;margin-top:18px}
  .plinks a{font-family:var(--mono);font-size:12.5px;display:inline-flex;gap:6px;align-items:center}
  .d .plinks a:hover{color:var(--green)}.s .plinks a:hover{color:var(--blue)}.c .plinks a:hover{color:var(--teal)}.l .plinks a:hover{color:var(--amber)}.w .plinks a:hover{color:var(--coral)}.gt .plinks a:hover{color:var(--rose)}.p .plinks a:hover{color:var(--cobalt)}
  .indev{font-family:var(--mono);font-size:12px;color:var(--soft);margin-top:16px}
  .bookcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -30px rgba(27,28,30,.4);overflow:hidden}
  .bookcard .hd{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line2);font-family:var(--mono);font-size:12px;color:var(--soft)}
  .bookcard .hd .sp{flex:1}.bookcard .hd .prog{color:var(--amber);font-weight:500}
  .bookcard .bd{padding:20px 22px 22px}
  .bookcard .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--faint);text-transform:uppercase}
  .bookcard h5{font-size:17px;margin:9px 0 8px;font-weight:700}
  .bookcard .txt{font-size:15px;color:var(--ink);line-height:1.55}
  .bookcard mark{background:var(--amberT);color:var(--amber);border-bottom:1.5px solid var(--amber);padding:0 2px;border-radius:2px}
  .bookcard .bfoot{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2);font-family:var(--mono);font-size:12px}
  .bookcard .exp{background:var(--amber);color:#fff;padding:7px 13px;border-radius:8px}
  .bookcard .chk{color:var(--amber)}

  /* Drafting suggestion card (recreated signature) */
  .dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -30px rgba(27,28,30,.4);overflow:hidden}
  .dcard .hd{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line2);font-family:var(--mono);font-size:12px;color:var(--soft)}
  .dcard .hd .tl{display:flex;gap:5px}.dcard .hd .tl i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
  .dcard .hd .sp{flex:1}
  .dcard .hd .lv{color:var(--green);display:flex;align-items:center;gap:5px}.dcard .hd .lv i{width:7px;height:7px;border-radius:50%;background:var(--green)}
  .dcard .bd{padding:20px 22px 22px}
  .dcard .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--faint);text-transform:uppercase}
  .dcard h5{font-size:17px;margin:10px 0 8px;font-weight:700}
  .dcard .txt{font-size:15px;color:var(--ink);line-height:1.55}
  .dcard mark{background:var(--greenT);color:var(--green);border-bottom:1.5px solid var(--green);padding:0 2px;border-radius:2px}
  .dcard .act{display:flex;align-items:center;gap:9px;margin-top:18px}
  .dcard .acc{background:var(--green);color:#fff;border:0;font-family:var(--mono);font-size:12.5px;padding:8px 16px;border-radius:8px;cursor:pointer}
  .dcard .rej{background:var(--card);color:var(--ink);border:1px solid var(--line);font-family:var(--mono);font-size:12.5px;padding:8px 16px;border-radius:8px;cursor:pointer}
  .dcard .src{flex:1;text-align:right;font-family:var(--mono);font-size:11px;color:var(--faint)}

  /* screenshot frames */
  .frame{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(27,28,30,.42)}
  .frame .fb{display:flex;align-items:center;gap:8px;padding:9px 14px;font-family:var(--mono);font-size:11.5px;background:#fff;color:var(--soft);border-bottom:1px solid var(--line2)}
  .frame.dark{border-color:#23262b}
  .frame.dark .fb{background:#15181d;color:#8b93a1;border-bottom:1px solid #23262b}
  .frame .fb .tl{display:flex;gap:5px}.frame .fb .tl i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
  .frame.dark .fb .tl i{background:#2b2f36}
  .frame .fb .lv{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--teal)}.frame .fb .lv i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
  .frame img{display:block;width:100%;height:auto}

  /* values */
  .values{border-top:1px solid var(--line);padding:52px 0;text-align:center}
  .values .k{margin-bottom:18px}
  .vgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
  .v{flex:1;min-width:160px;padding:6px 18px;border-right:1px solid var(--line2)}
  .v:last-child{border-right:0}
  .v .vt{font-weight:700;font-size:18px}
  .v .vd{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:3px;letter-spacing:.03em}

  /* about */
  .about{border-top:1px solid var(--line);padding:62px 0}
  .cols{display:grid;grid-template-columns:1.1fr 1fr;gap:50px}
  @media(max-width:760px){.cols{grid-template-columns:1fr;gap:28px}}
  .cols h3{font-weight:700;font-size:23px;margin:0 0 12px}
  .cols p{color:var(--soft);margin:0 0 14px}.cols p b{color:var(--ink)}
  .cols a.ln{color:var(--green)}
  .runbox{font-family:var(--mono);font-size:13px;background:#1a1c1f;color:#e7e6e1;border-radius:12px;padding:18px 20px;line-height:1.9;overflow-x:auto}
  .runbox .c{color:#8a8a83}.runbox .p{color:#6fd0b6}.runbox .ok{color:#6fd0b6}

  .contact{border-top:1px solid var(--line);padding:64px 0;text-align:center}
  .contact .ch{font-weight:800;font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;margin:14px auto 0;max-width:none;white-space:nowrap}
  @media(max-width:560px){.contact .ch{white-space:normal}}
  .contact .cp{max-width:52ch;margin:16px auto 0;color:var(--soft)}
  .cbtns{display:flex;justify-content:center;flex-wrap:wrap;gap:11px;margin-top:26px}
  .cmail{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:16px}
  footer{border-top:1px solid var(--line);padding:28px 0 46px}
  .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
  .foot a{font-family:var(--mono);font-size:12.5px;color:var(--soft)}.foot a:hover{color:var(--ink)}
  @media(max-width:560px){.foot{flex-direction:column;align-items:flex-start;gap:14px}footer nav.n{gap:8px 16px}}

  /* ── 제품 선반 (밴드 11개를 대체) ───────────────── */
  .shelf{padding:66px 0 72px;border-top:1px solid var(--line)}
  .sheye{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--soft)}
  .shh{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.02em;margin:12px 0 8px}
  .shp{color:var(--soft);max-width:64ch;margin:0 0 34px}
  .grp{margin-bottom:34px}
  .gh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 12px}
  .gtl{font-size:14px;font-weight:700}
  .gn{font:500 11px var(--mono);color:var(--soft);background:var(--line2);border-radius:20px;padding:2px 8px}
  .gd{font-size:12.5px;color:var(--soft)}
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media(max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}

  .shmore{margin:6px 0 0}
  .shmore a{font-size:14px;font-weight:600;color:var(--ink)}
  .n a.here{color:var(--ink);font-weight:600}

  /* ── /tools 제품 상세 ─────────────────────────────────
     ⚠️ 클래스에 tl- 를 붙인다. .dt·.dc·.dn 은 이미 히어로 점 색깔이라
        그대로 쓰면 이름 뒤에 색 블록이 깔린다(실제로 그랬다). */
  .tl-dets{padding:0 0 80px}
  .tl-deth{border-top:1px solid var(--line);padding-top:44px;margin-top:10px}
  .tl-det{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center;
    padding:38px 0;border-top:1px solid var(--line2)}
  .tl-det:first-of-type{border-top:0}
  @media(max-width:860px){.tl-det{grid-template-columns:1fr;gap:22px}}
  .tl-head{display:flex;align-items:baseline;gap:10px}
  .tl-name{font-size:21px;font-weight:800;letter-spacing:-.02em}
  .tl-code{font-family:var(--mono);font-size:11px;color:var(--soft)}
  .tl-tag{font-size:16.5px;font-weight:600;line-height:1.45;margin:11px 0 9px}
  .tl-det p{color:var(--soft);font-size:14.5px;line-height:1.65;margin:0 0 15px;max-width:62ch}
  .tl-det .plinks{margin:0}
  /* 프레임 없는 제품(Sliding·Coxpit 은 dark 프레임)도 칸이 비지 않게 */
  .tl-det > .frame{margin:0}

  /* 캐스트 11종 — 닿기·바짝·또봄 추가분 */
  .cast .m.dg .tag{color:var(--sky)}
  .cast .m.bj .tag{color:var(--graphite)}
  .cast .m.tb .tag{color:var(--salmon)}

  /* ── /tools 진입: 하려는 일로 찾기 ───────────────────── */
  .tl-doors{padding:56px 0 8px}
  .tl-dh{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.02em;margin:11px 0 22px}
  .tl-dogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  @media(max-width:900px){.tl-dogrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.tl-dogrid{grid-template-columns:1fr}}
  .tl-do{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#fff}
  .tl-do:hover{border-color:var(--ink)}
  .tl-do:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .tl-doq{font-size:14px}
  .tl-doa{font-family:var(--mono);font-size:11.5px;color:var(--soft);white-space:nowrap}
  .tl-do:hover .tl-doa{color:var(--ink)}

  /* ── /tools 두 갈래 이름 ─────────────────────────────── */
  .tl-fam{padding:48px 0 4px}
  .tl-famgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:14px;overflow:hidden}
  @media(max-width:760px){.tl-famgrid{grid-template-columns:1fr}}
  .tl-famcol{background:#fff;padding:24px 22px}
  .tl-famk{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--soft);margin-bottom:9px}
  .tl-famp{font-size:14.5px;line-height:1.65;color:var(--soft);margin:0}

  /* ── 상세: 같은 배치 11번을 끊는다 ───────────────────── */
  .tl-det:nth-of-type(even) .tl-info{order:2}
  .tl-det:nth-of-type(even) > .frame{order:1}
  .tl-code{font-variant-numeric:tabular-nums}

  /* ── 타일: 제품의 작은 세계 — 자기 틴트를 입는다 ────────
     흰 카드 그리드는 이 사이트의 정체성(제품 자기색)을 지웠다. 되돌린다. */
  .tile{--at:#F4F3F0;display:flex;flex-direction:column;border:1px solid rgba(27,28,30,.05);
    border-radius:16px;padding:17px 16px 12px;background:var(--at);
    transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
  .tile:hover{border-color:var(--a);transform:translateY(-3px);
    box-shadow:0 16px 30px -20px rgba(27,28,30,.3)}
  .tile:focus-visible{outline:2px solid var(--a);outline-offset:2px}
  .tm{height:54px;display:flex;align-items:flex-end;margin-bottom:10px}
  .tm img,.tm svg{filter:drop-shadow(0 6px 10px rgba(27,28,30,.14))}
  .tn{font-weight:800;font-size:16px;letter-spacing:-.015em;display:flex;align-items:baseline;gap:7px}
  .tno{font:500 10px var(--mono);font-style:normal;color:var(--a);letter-spacing:.06em}
  .to{color:var(--sub,#5C5F66);font-size:12.5px;line-height:1.5;margin-top:3px;flex:1}
  .tf{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
    padding-top:9px;border-top:1px solid rgba(27,28,30,.07);font-size:12px}
  .tp{font-family:var(--mono);font-size:10.5px;color:var(--soft)}
  .tgo{color:var(--a);font-weight:700;opacity:0;transform:translateX(-4px);transition:opacity .16s,transform .16s}
  .tile:hover .tgo{opacity:1;transform:none}
  .tile-soon{cursor:default;border-style:dashed;border-color:rgba(27,28,30,.14);background:transparent}
  .tile-soon:hover{border-color:rgba(27,28,30,.14);transform:none;box-shadow:none}
  .tile-soon:hover .tgo{opacity:0}
  /* 진입 줄 — 제품 액센트가 호버에 응답한다 */
  .tl-do:hover{border-color:var(--a)}
  .tl-do:hover .tl-doa{color:var(--a)}
  /* 상세 번호도 제품색 */
  .tl-det .tl-code{color:var(--a)}
  @media(prefers-reduced-motion:reduce){.tile,.tgo{transition:none}.tile:hover{transform:none}}

  /* ── 히어로 가족사진 — 개별 캐스트 11개를 사진 한 장으로 ── */
  .famphoto{display:block;width:min(860px,92%);height:auto;margin:0 auto 34px;
    border-radius:20px;box-shadow:0 30px 60px -34px rgba(27,28,30,.35)}

  /* ── 히어로 2단: 카피와 가족사진이 한 화면에서 대화한다 ──
     사진 따로/글 따로 쌓으면 서로 남남으로 보인다. 나란히 두고
     카피가 사진 속 열한 명을 가리키게 한다. */
  .hero .hero2{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center;text-align:left}
  .hero .hcopy .cta{justify-content:flex-start}
  .hero .hcopy .micro{text-align:left}
  .hphoto{margin:0}
  .hphoto .famphoto{width:100%;margin:0}
  .hphoto figcaption{font-family:var(--mono);font-size:11.5px;color:var(--soft);
    text-align:center;margin-top:12px;letter-spacing:.03em}
  @media(max-width:900px){
    .hero .hero2{grid-template-columns:1fr;gap:30px;text-align:center}
    .hero .hcopy .cta{justify-content:center}
    .hero .hcopy .micro{text-align:center}
    /* 좁은 화면에선 사진이 먼저 — 인사부터 하고 말한다 */
    .hphoto{order:-1}
  }