/* T2C 공용 스타일 — 국문판(/)과 영문판(/en)이 함께 쓴다.
   기준 화면 1440×900. 글자·여백은 고정하고 가로 위치만 창 폭에 비례한다 (Step 6 안건 1, C안).
   1600px보다 넓은 창에서는 1600px 폭으로 가운데에 모인다. */

/* ---- 서체 — 페이지에 쓰인 글자만 남긴 서브셋. 카피에 새 글자가 생기면 다시 만들어야 한다 ---- */
@font-face { font-family:"WantedSans"; font-weight:400; font-style:normal; font-display:block; src:url(fonts/wanted-sans-400.woff2) format("woff2"); }
@font-face { font-family:"WantedSans"; font-weight:500; font-style:normal; font-display:block; src:url(fonts/wanted-sans-500.woff2) format("woff2"); }
@font-face { font-family:"WantedSans"; font-weight:600; font-style:normal; font-display:block; src:url(fonts/wanted-sans-600.woff2) format("woff2"); }
@font-face { font-family:"WantedSans"; font-weight:700; font-style:normal; font-display:block; src:url(fonts/wanted-sans-700.woff2) format("woff2"); }

/* ---- 색 (R-2b · R-13 · R-16) ---- */
:root {
  --cream:#f4f0e6;    /* 바탕 */
  --ink:#18130e;      /* 글자 · 로고 */
  --body:#48423b;     /* 본문 */
  --small:#6e6860;    /* 작은 글자 */
  --rule:#7f7871;     /* 입력선 */
  --line:#a8a199;     /* 가운데 세로선 */
  --red:#c82a19;      /* 교정 빨강 — 밑줄 · 키보드 표시 · 텍스트 선택 */
  --marker:#eac4b9;   /* 형광펜 — 지금 읽는 메뉴 */
  --font:"WantedSans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* ---- 가로 위치 (괄호 안은 1440 폭에서의 값) ---- */
  --W:min(100vw, 1600px);                                   /* 사이트 폭 — 1600에서 멈춘다 */
  --ox:calc((100vw - var(--W)) / 2);                        /* 넓은 창에서 생기는 바깥 여백 */
  --gx:clamp(48px, calc(var(--W) * .066667), 128px);        /* 바깥 여백 (96) */
  --split:calc(var(--W) * .266667);                         /* 가운데 선 (384) */
  --col:624px;                                              /* 본문 칸 */
  --start:min(calc(var(--W) * .5), calc(var(--W) - var(--gx) - var(--col)));  /* 본문 시작 (720) */
  --foot:88px;                                              /* 푸터 띠 높이 */
}

/* ---- 바탕 ---- */
html, body { height:100%; margin:0; overflow:hidden; }
body { background:var(--cream); color:var(--ink); font-family:var(--font);
  word-break:keep-all; overflow-wrap:break-word;   /* 국문은 어절 단위로 끊는다 (4-4) */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { background:var(--red); color:var(--cream); }
h1, h2, h3, p, dl, dd { margin:0; }
h1, h2, h3 { font:inherit; }
a { color:inherit; }
[hidden] { display:none !important; }   /* 숨긴 요소는 어떤 display 규칙보다 우선해 사라진다 — 전송 후 폼이 자리만 차지하던 문제 */
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.nw { white-space:nowrap; }

/* ---- 고정된 틀 — 로고 · 메뉴 · 가운데 선 · 푸터 (R-1) ---- */
.logo, .nav, .divider, .cue, .foot, .pane { position:fixed; }

.logo { left:calc(var(--ox) + var(--gx)); top:112px; width:216px; color:inherit; cursor:pointer; }
.logo svg { display:block; width:100%; height:auto; }
.logo:focus-visible { outline:2px solid var(--red); outline-offset:8px; }

.nav { left:calc(var(--ox) + var(--gx)); top:372px; display:flex; flex-direction:column; align-items:flex-start; gap:48px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.nav-group { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.nav a { text-decoration:none; position:relative; display:inline-flex; align-items:center; gap:8px; }
.nav a > span { position:relative; z-index:1; }
.nav a:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
/* 형광펜 (R-2d) */
.nav a::after { content:""; position:absolute; left:-4px; right:-4px; top:18%; bottom:4%; background:var(--marker);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav a.on::after { transform:scaleX(1); }
.arr { width:13px; height:auto; position:relative; z-index:1; }
/* KO · EN (R-4 · R-14) */
.lang { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.lang a { color:var(--small); }
.lang a[aria-current="page"] { color:var(--ink); }
.lang a::after { display:none; }

/* 가운데 선 — 위아래 48px씩 열어 둔다 (R-8) */
.divider { left:calc(var(--ox) + var(--split)); top:48px; bottom:48px; width:1px; background:var(--line); }

/* 푸터 (R-9) */
.foot { bottom:40px; font-size:14px; line-height:24px; color:var(--small); white-space:nowrap; }
.foot-1 { left:calc(var(--ox) + var(--gx)); }
.foot-2 { left:calc(var(--ox) + var(--start)); }
.foot-3 { left:calc(var(--ox) + var(--start) + var(--col)); transform:translateX(-100%); }

/* 스크롤 유도 화살표 (R-10) */
.cue { left:calc(var(--ox) + var(--start) + var(--col) - 28px); bottom:112px; width:28px; height:72px; padding:0; border:0; background:none;
  color:var(--ink); cursor:pointer; display:flex; justify-content:center; transition:opacity .4s ease; z-index:2; }
.cue svg { width:14px; height:auto; animation:bob 2.2s ease-in-out infinite; }
.cue.still svg { animation:none; }
.cue.gone { opacity:0; pointer-events:none; }
.cue:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
@keyframes bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(8px); } }

/* ---- 흐르는 쪽 — 오른쪽 영역만 스크롤된다 ---- */
.pane { left:calc(var(--ox) + var(--split)); right:0; top:0; bottom:var(--foot);
  overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-width:none;
  scroll-snap-type:y proximity; }   /* 약한 스냅 (R-15) */
.pane::-webkit-scrollbar { display:none; }
.pane:focus-visible { outline:none; }

/* 블록 — 위아래 112, 내용은 본문 칸 한 칸 (R-6 · R-16) */
.blk { box-sizing:border-box; min-height:calc(100vh - var(--foot)); scroll-snap-align:start;
  padding:112px var(--gx) 112px calc(var(--start) - var(--split)); }
.blk > * { max-width:var(--col); }

/* ---- 글자 체계 (R-16) ---- */
.h1 { font-size:38px; line-height:56px; font-weight:700; }
.hsub { margin-top:32px; font-size:18px; line-height:32px; color:var(--body); text-wrap:pretty; }
.blk p { font-size:18px; line-height:32px; color:var(--body); text-wrap:pretty; }
.blk .lead { font-size:26px; line-height:40px; font-weight:500; color:var(--ink); }
.lbl { font-size:14px; line-height:24px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--small); }

/* 밑줄 — H1의 두 낱말(R-19)과 링크 */
u, .out a { text-decoration:none; color:var(--ink); padding-bottom:2px;
  background:linear-gradient(var(--red), var(--red)) left bottom / 100% 2px no-repeat; }
.h1 u { background-size:100% 4px; }
.out a:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* ---- Services — 셋 다 닫힘, 누르면 본문이 제목과 캡션 사이로 (R-11 · R-11a) ---- */
.acc { margin-top:64px; display:grid; gap:32px; }
.ach { display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px;
  padding:0; background:none; border:0; cursor:pointer; color:inherit; font:inherit;
  font-size:18px; line-height:32px; font-weight:600; text-align:left; }
.ach:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.pm { display:block; width:16px; height:16px; flex:none; color:var(--small); }
.pm svg { display:block; width:100%; height:100%; }
.pm .v { transition:transform .3s ease; transform-origin:50% 50%; }
.ac.open .pm .v { transform:scaleY(0); }
.acw { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.ac.open .acw { grid-template-rows:1fr; }
.acb { overflow:hidden; }
.acb p { margin-top:16px; padding-top:12px; }
.cap { display:block; margin-top:8px; font-size:14px; line-height:24px; color:var(--small); }
.ac.open .cap { margin-top:12px; }

/* ---- Perspective — 접지 않고 전부 펼친다 (R-12) ---- */
.pillars { display:grid; gap:64px; }
.pp-k { display:block; font-size:14px; line-height:24px; font-weight:500; letter-spacing:.1em; color:var(--small); }
.pp-h { margin-top:8px; font-size:26px; line-height:40px; font-weight:500; letter-spacing:-.015em; }
.pp .pp-h + p { margin-top:16px; }

/* ---- About + Work (R-5) ---- */
.lbl.work { margin-top:64px; }
.wk { margin-top:20px; }
.wk dt { font-size:14px; line-height:24px; color:var(--small); }
.wk dd + dt { margin-top:24px; }
.wk dd { font-size:26px; line-height:40px; font-weight:500; letter-spacing:-.015em; }
.out { margin-top:16px; }

/* ---- Contact 폼 (안건 3) — Netlify Forms. 칸은 밑줄 하나, 지금 쓰는 칸은 먹, 고칠 칸은 교정 빨강 ---- */
.form { margin-top:64px; display:grid; gap:32px; transition:opacity .35s ease; }
.form fieldset { border:0; margin:0; padding:0; min-width:0; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.fld { display:grid; gap:8px; align-content:start; }
.fl-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.fl { font-size:14px; line-height:24px; color:var(--small); padding:0; }
legend.fl { margin-bottom:12px; }
.in { display:block; width:100%; box-sizing:border-box; height:32px; margin:0; padding:0 0 4px; border:0; border-bottom:1px solid var(--rule); border-radius:0;
  background:transparent; color:var(--ink); font:inherit; font-size:18px; line-height:27px; appearance:none;
  transition:border-color .2s ease, box-shadow .2s ease, background-color 9999s; }   /* 마지막 값은 브라우저 자동 완성의 노란 바탕을 막는다 */
textarea.in { height:96px; padding-top:4px; resize:none; overflow:hidden; line-height:28px; }   /* 글이 길어지면 칸이 늘어난다 (t2c.js) */
.in:focus { outline:none; border-bottom-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.in[aria-invalid="true"] { border-bottom-color:var(--red); box-shadow:0 1px 0 var(--red); }
/* 오류 표시 (I-3 C안) — 라벨 줄 끝에 짧게 적는다. 교정지 여백의 메모처럼. 칸 높이가 변하지 않는다
   .err-s는 화면에 보이는 짧은 말, .err는 화면 낭독기가 읽는 완전한 문장 */
.err-s { font-size:14px; line-height:24px; color:var(--red); white-space:nowrap; }   /* 밑줄과 같은 교정 빨강 (크림 위 4.9:1) — 빨강을 글자에 쓰는 유일한 자리 */
.err-s:empty { display:none; }
.err { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* 프로젝트 유형 — 여럿 고를 수 있다 */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { position:relative; display:inline-flex; cursor:pointer; }
.chip input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.chip span { font-size:14px; line-height:24px; padding:8px 16px; border:1px solid var(--rule); border-radius:999px; transition:background-color .2s ease, color .2s ease; }
.chip input:checked + span { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.chip input:focus-visible + span { outline:2px solid var(--ink); outline-offset:2px; }
.send { margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.btn { display:inline-block; margin:0; border:0; border-radius:0; font:inherit; font-size:14px; line-height:24px; padding:12px 24px; background:var(--ink); color:var(--cream); cursor:pointer; }
.btn:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.btn:disabled { opacity:.5; cursor:progress; }
.form .form-msg { flex:1 1 240px; margin:0; font-size:14px; line-height:24px; color:var(--ink); }
.form .form-msg:empty { display:none; }
/* 전송 후 (C-15) */
.blk .sent { margin-top:64px; font-size:18px; line-height:32px; color:var(--ink); padding-top:24px; border-top:1px solid var(--rule);
  opacity:0; transition:opacity .35s ease; }
.sent.on { opacity:1; }

/* ---- 404 — 첫 화면의 H1 자리에 안내 한 줄과 돌아가는 링크 ---- */
.nf-back { margin-top:32px; }
.nf-back a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); padding-bottom:2px;
  background:linear-gradient(var(--red), var(--red)) left bottom / 100% 2px no-repeat; }
.nf-back a:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.nf-back .arr { width:14px; }

/* ---- 첫 진입 — 로고 타자 → 화면 페이드인 → H1 밑줄 (R-18) ---- */
.nav, .divider, footer, .pane { transition:opacity .8s ease; }
.typing .nav, .typing .divider, .typing .cue, .typing footer, .typing .pane, .typing .band { opacity:0; transition:none; }
.typing .logo path { opacity:0; }
.typing .logo path.on { opacity:1; }
.h1 u { transition:background-size .55s cubic-bezier(.4,0,.2,1); }
.h1 u:nth-of-type(2) { transition-delay:.3s; }
.pre-ink .h1 u { background-size:0% 2px; transition:none; }
.caret { position:fixed; width:3px; background:var(--red); pointer-events:none; opacity:0; z-index:3; }
.caret.on { opacity:1; }
.caret.blink { animation:blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---- 동작 줄이기 설정 ---- */
@media (prefers-reduced-motion: reduce) {
  .cue svg { animation:none; }
  .nav a::after, .pm .v, .acw, .form, .sent, .h1 u, .in, .chip span { transition:none; }
  .pane { scroll-behavior:auto; }
}

/* ======================================================================
   모바일·태블릿 — 1100px보다 좁은 창 (Step 6 안건 2)
   왼쪽 단이 위쪽 띠로 접히고(R-1) 페이지 전체가 스크롤된다. 푸터는 맨 끝에 온다.
   ====================================================================== */
.band { display:none; }
@media (max-width: 1099.98px) {
  :root { --gx:48px; --band:96px; }
  html, body { height:auto; overflow:visible; }
  body { display:flex; flex-direction:column; }
  main { order:1; } footer { order:2; }

  /* 위쪽 띠 */
  .band { display:flex; align-items:flex-start; gap:16px; position:fixed; top:0; left:0; right:0; z-index:10;
    height:var(--band); box-sizing:border-box; padding:env(safe-area-inset-top, 0px) var(--gx) 0;
    background:var(--cream); border-bottom:1px solid transparent; transition:border-color .25s ease, opacity .8s ease;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
  .band.scrolled { border-bottom-color:var(--line); }   /* 흐르는 쪽이 띠 밑으로 들어갈 때만 경계선 — 가운데 세로선(R-8)의 자리 */
  .band a, .band button { color:inherit; text-decoration:none; font:inherit; letter-spacing:inherit; text-transform:inherit;
    background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; }
  .band a:focus-visible, .band button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .band-logo { margin-right:auto; min-height:56px; transition:opacity .3s ease, visibility .3s; }
  .band-logo svg { display:block; height:12px; width:auto; margin-top:3px; }   /* 옆 대문자들과 글자 바닥선을 맞춘다 */
  .band:not(.past) .band-logo { opacity:0; visibility:hidden; }   /* 히어로의 3행 로고가 보이는 동안은 띠에 로고를 두지 않는다 */

  /* 띠 두 줄 (I-2 A안) — 윗줄은 하는 일(KO EN · Contact →), 아랫줄은 읽는 메뉴(형광펜). 데스크톱 왼쪽 단의 두 묶음을 눕힌 것 */
  .nav { position:fixed; z-index:11; top:env(safe-area-inset-top, 0px); left:var(--gx); right:var(--gx); height:96px;
    display:grid; grid-template-columns:1fr auto; grid-template-rows:56px 40px; gap:0; align-items:center; pointer-events:none; }
  .nav-group { pointer-events:auto; }
  .nav-group:first-child { grid-row:2; grid-column:1 / -1; flex-direction:row; align-items:center; gap:24px; align-self:start; }
  .nav-group:last-child { grid-row:1; grid-column:2; flex-direction:row; align-items:center; gap:24px; }
  .lang { flex-direction:row; gap:14px; order:-1; }
  .nav a { min-height:36px; }

  /* 3행 로고는 히어로 맨 위로 */
  .logo { position:absolute; top:calc(var(--band) + 32px); left:var(--gx); width:216px; }

  /* 흐르는 쪽 */
  .pane { position:static; overflow:visible; scroll-snap-type:none; padding-top:var(--band); }
  .divider { display:none; }
  .blk { min-height:0; padding:96px var(--gx) 0; scroll-margin-top:var(--band); }
  .blk:last-child { padding-bottom:96px; }
  .in { scroll-margin-top:calc(var(--band) + 48px); }   /* 고칠 칸으로 옮겨 갈 때 띠에 가리지 않게 */
  #top { min-height:calc(100svh - var(--band)); padding-top:calc(32px + 187px + 64px); box-sizing:border-box; }

  /* 스크롤 유도 화살표 — 히어로 아래에만, 움직이며 (스크롤하면 함께 지나간다) */
  .cue { position:absolute; top:calc(100svh - 96px); bottom:auto; left:auto; right:var(--gx); opacity:1 !important; pointer-events:auto !important; }
  .cue.still svg { animation:bob 2.2s ease-in-out infinite; }

  /* 푸터 — 페이지 끝에 세 줄 */
  footer { padding:48px var(--gx) calc(40px + env(safe-area-inset-bottom, 0px)); display:grid; gap:4px; }
  .foot { position:static; transform:none; }
}

/* 휴대폰 — 600px보다 좁은 창 */
@media (max-width: 599.98px) {
  :root { --gx:24px; }
  .logo { width:160px; }
  #top { padding-top:calc(24px + 139px + 48px); }
  .logo { top:calc(var(--band) + 24px); }
  .blk { padding-top:80px; }
  .blk:last-child { padding-bottom:80px; }
  .h1 { font-size:30px; line-height:44px; }
  .hsub { margin-top:24px; }
  .blk p, .hsub, .ach { font-size:17px; line-height:30px; }
  .blk .lead { font-size:21px; line-height:34px; }
  .pp-h { font-size:21px; line-height:32px; }
  .wk dd { font-size:20px; line-height:32px; }
  .acc, .form { margin-top:48px; }
  .pillars { gap:48px; }
  .lbl.work { margin-top:48px; }
  .two { grid-template-columns:1fr; }
  .nav-group:first-child { gap:20px; }
  .nav-group:last-child { gap:18px; }
}

@media (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
  .band, .band-logo { transition:none; }
  .cue svg, .cue.still svg { animation:none; }
}