/* GRIP IT — 랜딩 페이지
   밝은 테마 전용 (다크 모드 없음 · 04번 T7)
   난색(햇볕)은 분위기, 한색(딥 네이비·밝은 블루)은 정보를 맡는다. */

:root {
  /* 바탕 — 햇볕처럼 따뜻하고 밝은 톤 */
  --sun-050: #fffaf2;
  --sun-100: #fdf4e7;
  --sun-200: #f7e9d5;
  --glow:    #ffd9a0;

  /* 정보 — 한색 */
  --navy-900: #0f2440;
  --navy-700: #1c3a5e;
  --navy-500: #40566f;
  --blue-600: #1668d8;
  --blue-500: #2f86f0;
  --blue-100: #dceafc;

  /* 데모 상태 3색 — 데모 블록 안에서만 쓴다 */
  --st-resolved:   #1f7a4d;
  --st-unresolved: #a86b16;
  --st-dropped:    #7b7f88;

  --w-narrow: 46rem;
  --w-wide: 72rem;

  /* 상단 바 높이 = 위아래 패딩 0.52rem + 로고 4.24rem.
     sticky 바에 제목이 가리지 않도록 앵커 이동 여백의 기준이 된다. */
  --topbar-h: 5.28rem;

  --font-sans: "Pretendard", "Pretendard Variable", "Noto Sans KR", -apple-system,
               BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "D2Coding", "Nanum Gothic Coding", "SFMono-Regular", Menlo, Consolas,
               "Apple SD Gothic NeoMono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* 앵커로 이동할 때 sticky 상단 바 아래로 제목이 들어가지 않게 한다.
   섹션 자체가 padding-top 4.5rem 을 갖고 있으므로 여기서는 바 높이만 비운다. */
section[id] { scroll-margin-top: var(--topbar-h); }

body {
  margin: 0;
  background: var(--sun-050);
  color: var(--navy-900);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

a { color: var(--blue-600); }

code, pre { font-family: var(--font-mono); }

/* ---------- 폭 ---------- */
.narrow { max-width: var(--w-narrow); margin: 0 auto; padding: 0 1.25rem; }
.wide   { max-width: var(--w-wide);   margin: 0 auto; padding: 0 1.25rem; }

/* ---------- 상단 바 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 250, 242, 0.92);
  border-bottom: 1px solid var(--sun-200);
  backdrop-filter: saturate(180%) blur(8px);
}
.topbar-inner {
  max-width: var(--w-wide); margin: 0 auto; padding: 0.52rem 1rem;
  display: flex; align-items: center; gap: 0.4rem;
}
/* 상단 바 5.28rem — 로고 4.24rem 이 높이의 80%를 채운다.
   위아래 여백은 0.52rem 씩만 남긴다. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 4.24rem; width: auto; display: block; }
@media (max-width: 560px) {
  :root { --topbar-h: 3.6rem; }
  .topbar-inner { padding: 0.4rem 1rem; }
  .brand img { height: 2.8rem; }
}
/* 로고를 뺀 나머지 폭을 네비가 전부 차지하고, 그 안에서 링크가 균등하게 벌어진다 */
.topbar-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.4rem; }
.langswitch { display: inline-flex; border: 1px solid var(--blue-100); border-radius: 999px; overflow: hidden; }
.lang-btn {
  border: 0; background: transparent; color: var(--navy-500);
  font: inherit; font-size: 0.82rem; padding: 0.2rem 0.7rem; cursor: pointer;
}
.lang-btn.is-on { background: var(--blue-600); color: #fff; }
.repo-link { font-size: 0.88rem; text-decoration: none; }
.repo-link:hover { text-decoration: underline; }

/* ---------- 손 연출 배경 레이어 (히어로 → S6 데모) ---------- */
.hand-stage {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  will-change: opacity;
}
.hand-stage img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 48%;
  display: block;
}
.hand-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 52%, var(--glow) 0%, rgba(255, 217, 160, 0.4) 26%, rgba(255, 217, 160, 0) 60%);
  mix-blend-mode: screen;
}
/* 본문 가독성용 막.
   --scrim 은 hero.js가 스크롤에 따라 올린다 — 히어로에서는 거의 걷어 손이 또렷하게 보이고,
   산문이 시작되면 짙어져 글자가 배경과 다투지 않게 한다. */
.hand-scrim {
  position: absolute; inset: 0;
  --scrim: 0.12;
  background: linear-gradient(180deg,
    rgba(255, 250, 242, calc(var(--scrim) * 0.45)) 0%,
    rgba(255, 250, 242, calc(var(--scrim) * 0.85)) 38%,
    rgba(255, 250, 242, var(--scrim)) 70%,
    rgba(255, 250, 242, calc(var(--scrim) * 1.08)) 100%);
  transition: background 220ms linear;
}

/* 본문은 배경 위에 얹힌다 (.topbar는 sticky·z-index 20을 유지해야 하므로 제외) */
main, .footer { position: relative; z-index: 1; }

/* ---------- S0 히어로 (전체 폭) ---------- */
.hero {
  position: relative;
  min-height: 66vh;
  display: flex; align-items: flex-end;
  padding: 9vh 0 4rem;
}
.hero-copy { position: relative; width: 100%; }
.hero .wordmark {
  margin: 0 0 0.5rem;
  font-size: clamp(2.6rem, 8vw, 4.6rem); font-weight: 800;
  letter-spacing: 0.02em; line-height: 1.05; color: var(--navy-900);
}
.catch {
  margin: 0 0 1.1rem;
  font-size: clamp(1.35rem, 3.4vw, 2.05rem); font-weight: 700;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--blue-600);
}
.subtitle {
  margin: 0 0 1.3rem; font-size: 1.06rem; font-weight: 600;
  color: var(--navy-700); line-height: 1.5;
}
.hero .def { color: var(--navy-700); margin: 0 0 1.8rem; }

.solid-btn {
  display: inline-block; text-decoration: none;
  background: var(--blue-600); color: #fff; border: 1px solid var(--blue-600);
}
.solid-btn:hover { background: var(--blue-500); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.75rem; }
.crack {
  margin: 0 0 0.9rem; font-size: 1.02rem; line-height: 1.6; color: var(--navy-500);
  border-left: 3px solid var(--blue-500); padding-left: 0.9rem;
}

/* ---------- 버튼 ---------- */
.copy-btn, .ghost-btn, .solid-btn {
  font: inherit; font-size: 0.9rem; border-radius: 8px; cursor: pointer;
  padding: 0.45rem 0.9rem; text-decoration: none; display: inline-block;
}
.copy-btn { background: var(--blue-600); color: #fff; border: 1px solid var(--blue-600); }
.copy-btn:hover { background: var(--blue-500); }
.copy-btn.is-done { background: var(--st-resolved); border-color: var(--st-resolved); }
.ghost-btn { background: #fff; color: var(--navy-700); border: 1px solid var(--sun-200); }
.ghost-btn:hover { border-color: var(--blue-500); color: var(--blue-600); }

/* ---------- 섹션 공통 ---------- */
.section { padding: 4.5rem 0; border-top: 1px solid var(--sun-200); }
.section h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.35;
  margin: 0 0 1rem; letter-spacing: -0.015em;
}
.section h3 { font-size: 1.12rem; margin: 2rem 0 0.6rem; }
.section p { margin: 0 0 1rem; }
.lead { color: var(--navy-700); }
.closing { font-weight: 700; }
.bridge {
  margin-top: 2rem; color: var(--blue-600); font-size: 0.98rem;
}
.bridge::before { content: "↓ "; }
.callout {
  background: #fff; border: 1px solid var(--blue-100); border-radius: 10px;
  padding: 0.9rem 1rem; color: var(--navy-700);
}

/* ---------- S1 네 장면 ---------- */
.scenes { list-style: none; margin: 1.5rem 0; padding: 0; }
.scene {
  display: flex; gap: 0.9rem; align-items: baseline;
  padding: 0.85rem 0; border-bottom: 1px dashed var(--sun-200);
}
/* JS가 붙었을 때만 숨겼다가 순차로 드러낸다 — JS가 실패해도 네 장면은 그대로 읽힌다 */
.scenes.is-armed .scene { opacity: 0; transition: opacity 620ms ease; }
.scenes.is-armed .scene.is-in { opacity: 1; }
.scene-n { color: var(--blue-500); font-family: var(--font-mono); font-size: 0.85rem; }
.scene p { margin: 0; }

/* ---------- S2 용어 ---------- */
.glossary {
  margin: 1.6rem 0 0; padding: 1.1rem 1.2rem;
  background: var(--sun-100); border: 1px solid var(--sun-200); border-radius: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1.6rem;
}
.gl-row { padding: 0.55rem 0; border-top: 1px solid var(--sun-200); }
.gl-row:nth-child(-n+2) { border-top: 0; }
.gl-row dt { font-size: 0.86rem; font-weight: 700; color: var(--navy-700); }
.gl-row dd { margin: 0.2rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--navy-500); }
@media (max-width: 720px) {
  .glossary { grid-template-columns: 1fr; }
  .gl-row:nth-child(2) { border-top: 1px solid var(--sun-200); }
}

/* ---------- S3 대조 — 지친 인터뷰 vs 함께 붙잡기 ---------- */
.tag { font-size: 0.76rem; letter-spacing: 0.04em; color: var(--navy-500); }

/* ---------- 표 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { border-collapse: collapse; width: 100%; background: #fff; font-size: 0.95rem; }
.tbl th, .tbl td {
  border: 1px solid var(--sun-200); padding: 0.7rem 0.85rem;
  text-align: left; vertical-align: top;
}
.tbl thead th { background: var(--blue-100); color: var(--navy-900); font-weight: 700; }
.tbl tbody th { background: var(--sun-100); font-weight: 700; white-space: nowrap; }

/* ---------- 다이어그램 ---------- */
.diagram { display: block; width: 100%; height: auto; margin: 1.5rem auto; }

/* ---------- S6 데모 ---------- */
.demo { margin-top: 1.5rem; }
.demo-note { font-size: 0.86rem; color: var(--navy-500); }
.cut { margin: 1.2rem 0; }
.cut h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.35rem; }
.cut-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-size: 0.85rem; font-family: var(--font-mono);
}
.cut-lead { color: var(--navy-700); font-size: 0.95rem; margin: 0 0 0.6rem; }
.cut-bridge {
  margin: 0.4rem 0 1.4rem; padding-left: 2.1rem;
  color: var(--blue-600); font-size: 0.95rem;
}
.code {
  background: #fff; border: 1px solid var(--sun-200); border-radius: 10px;
  padding: 0.9rem 1rem; margin: 0; overflow-x: auto;
  font-size: 0.84rem; line-height: 1.65; color: var(--navy-900);
  white-space: pre;
}
.code code { white-space: pre; }

/* ---------- S7 도메인 탭 ---------- */
.domain-tabs, .install-tabs, .install-scopes {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem;
}
.domain-tabs { display: none; }
.tab, .chip {
  font: inherit; font-size: 0.88rem; cursor: pointer;
  border: 1px solid var(--sun-200); background: #fff; color: var(--navy-700);
  padding: 0.35rem 0.8rem; border-radius: 999px;
}
.tab.is-on, .chip.is-on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ---------- S9 설치 ---------- */
.install {
  border: 1px solid var(--blue-100); border-radius: 12px; background: #fff;
  padding: 1rem; margin: 1.5rem 0;
}
.install .code { border-color: var(--blue-100); margin-bottom: 0.7rem; }
.hint { font-size: 0.86rem; color: var(--navy-500); margin: 0.7rem 0 0; }
.uses { padding-left: 1.1rem; color: var(--navy-700); }
.uses li { margin: 0.4rem 0; }
.finale {
  margin: 2.5rem 0 0; font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.4;   /* 두 줄이 되었으므로 줄 간격을 잡아 준다 */
}

/* ---------- 푸터 ---------- */
.footer { padding: 2.5rem 0 4rem; border-top: 1px solid var(--sun-200); }
.footer p { margin: 0.2rem 0; font-size: 0.9rem; }
.fine { color: var(--navy-500); font-size: 0.82rem; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero-visual { height: 46vh; min-height: 260px; }
  
  /* 도메인 표는 도메인별 탭으로 접는다 (04번 T15) */
  .domain-tabs { display: flex; }
  .domain-table th[data-col]:not(.is-on),
  .domain-table td[data-col]:not(.is-on) { display: none; }
}


/* 설치 — 두 방법을 좌우로 나란히, 클릭 접근성 동일 */
.install-ways {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  margin: 1.4rem 0 0;
}
.way {
  display: flex; flex-direction: column;
  padding: 1.2rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--sun-200);
}
.way-title { margin: 0 0 0.35rem; font-size: 1.02rem; }
.way-desc { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--navy-500); }
.way .code { flex: 1 1 auto; }
.way .copy-btn { align-self: flex-start; margin-top: 0.8rem; }
.way .hint { margin: 0.7rem 0 0; }
@media (max-width: 860px) { .install-ways { grid-template-columns: 1fr; } }


/* 설치 명령 — URL이 길어 좁은 칸을 넘치므로 시각적으로만 접는다.
   pre-wrap 은 개행 문자를 넣지 않으므로 복사한 명령은 원본 그대로 한 줄이다. */
.way .code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.way .code code { white-space: pre-wrap; }


/* 설치 요약 — 히어로에서 펼쳐 보는 축약본 */
.install-drop {
  margin-top: 1rem; padding: 1.1rem 1.2rem;
  background: #fff; border: 1px solid var(--sun-200); border-radius: 14px;
}
.install-drop[hidden] { display: none; }
.drop-title { margin: 0 0 0.7rem; font-size: 0.92rem; color: var(--navy-700); }
.install-drop .code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.82rem; }

/* ---------- S6 데모 — 터미널 창 (Claude Code CLI 느낌) ----------
   밝은 페이지 안에서 이 블록만 어둡게 둔다. 실제 화면을 인용하는 자리이므로
   본문 카드가 아니라 "화면"으로 읽혀야 한다. 눈이 편한 채도로 맞췄다. */
.term-win {
  margin: 0.6rem 0 0;
  border-radius: 12px; overflow: hidden;
  background: #1c222e;
  border: 1px solid #2c3648;
  box-shadow: 0 10px 28px rgba(15, 36, 64, 0.16);
}
.term-bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: #232b3a; border-bottom: 1px solid #2c3648;
}
.term-bar .dot {
  width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #3c4759;
}
.term-bar .dot:first-child { background: #e0665f; }
.term-bar .dot:nth-child(2) { background: #e0b35f; }
.term-bar .dot:nth-child(3) { background: #6fbf7f; }
.term-name {
  margin-left: 0.5rem; font-family: var(--font-mono);
  font-size: 0.76rem; letter-spacing: 0.06em; color: #7d8899;
}
.term-win .table-scroll { border-radius: 0; }
.code.term {
  background: transparent; border: 0; border-radius: 0;
  color: #d5dbe6; padding: 1rem 1.1rem;
}

/* 하이라이팅 — 상태 3색은 데모 안에서만 쓴다 (04번 T7) */
.t-lbl   { color: #8ab4ff; font-weight: 700; }
.t-key   { color: #8ab4ff; }
.t-ok    { color: #7fd3a3; }
.t-un    { color: #e3c07a; }
.t-core  { color: #c9a5ea; font-weight: 700; }
.t-minor { color: #8d97a8; }
.t-opt   { color: #d5dbe6; font-weight: 700; }
.t-rec   { color: #7fd3a3; font-weight: 700; }
.t-dim   { color: #7d8899; }

.term-win[hidden] { display: none; }


/* 푸터 심볼 */
.footer-mark {
  height: 2.6rem; width: auto; display: block;
  margin: 0 0 0.9rem; opacity: 0.9;
}


/* ---------- S6 데모 — 2×2 배치 ---------- */
.cut-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem;
  margin-top: 1.4rem;
}
.cut-grid .cut { margin: 0; display: flex; flex-direction: column; }
.cut-grid .cut-lead { font-size: 0.9rem; color: var(--navy-500); }
/* 한 행의 카드는 높이가 같으므로, 터미널 창이 남는 높이를 전부 차지하게 한다 */
.cut-grid .term-win { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 0.7rem; }
.cut-grid .term-win .table-scroll { flex: 1 1 auto; display: flex; }
/* 위 규칙의 display:flex 가 .term-win[hidden] 과 특이도가 같아(0,2,0) 뒤에 온 쪽이
   이겨 버린다. 언어별 블록이 둘 다 보이던 원인이므로 한 단계 위로 다시 눌러 준다. */
.cut-grid .term-win[hidden] { display: none; }
.cut-grid .code.term { flex: 1 1 auto; width: 100%; }
/* 좁은 칸이므로 긴 줄은 접는다 — 기록부 행은 짧게 축약해 접히지 않는다 */
.cut-grid .code.term {
  font-size: 0.74rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 860px) { .cut-grid { grid-template-columns: 1fr; } }


/* ---------- 상단 네비 섹션 바로가기 ---------- */
.navlinks {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;    /* 링크가 물려받는다 — gap 의 em 기준이 된다 */
  gap: 2em;             /* 한글 두 글자 폭 */
}
.navlinks a {
  font-size: inherit; text-decoration: none; color: var(--navy-700);
  white-space: nowrap; padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}
.navlinks a:hover { color: var(--blue-600); border-bottom-color: var(--blue-500); }
/* 좁은 화면에서는 로고·언어·저장소만 남긴다 */
/* 폭이 줄면 글자와 간격을 단계적으로 좁히고, 그래도 모자라면 가로로 밀어 본다.
   링크를 통째로 감추는 것은 로고만 남는 아주 좁은 화면에서만 한다. */
@media (max-width: 1280px) { .navlinks { font-size: 1rem; gap: 1.5em; } }
@media (max-width: 1080px) {
  .navlinks {
    font-size: 0.95rem; gap: 1.2em;
    justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .navlinks::-webkit-scrollbar { display: none; }
}
@media (max-width: 620px) { .navlinks { display: none; } }

/* ---------- 히어로 설치 요약 — 두 방식을 좌우로 ---------- */
.drop-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.drop-way { display: flex; flex-direction: column; min-width: 0; }
.drop-title { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 700; color: var(--navy-900); }
.drop-sub { margin: 0 0 0.6rem; font-size: 0.84rem; color: var(--navy-500); }
.drop-way .code { font-size: 0.78rem; flex: 1 1 auto; }
.drop-way .copy-btn { align-self: flex-start; margin-top: 0.7rem; }
.drop-sub a { color: var(--blue-600); }
/* 에이전트 문장은 접고, 셸 명령은 가로로 민다 — 어느 쪽도 화면 폭을 넘지 않는다 */
.code.wrap    { white-space: pre-wrap; overflow-wrap: anywhere; }
.code.scrollx { white-space: pre; overflow-x: auto; }
@media (max-width: 720px) { .drop-ways { grid-template-columns: 1fr; } }


/* ---------- S3 좌우 대조 ---------- */
.turn { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.turn-col {
  display: flex; flex-direction: column;
  padding: 1.7rem 1.6rem; border-radius: 18px;
}
.turn-col .tag { display: block; margin-bottom: 0.5rem; }
.turn-col h2 {
  font-size: clamp(1.2rem, 2.3vw, 1.6rem); line-height: 1.4; margin: 0 0 0.9rem;
}
.turn-col p { font-size: 0.98rem; }
.turn-col .fine { margin-top: auto; padding-top: 0.8rem; }

/* 왼쪽 — 지친 쪽. 난색으로 눌러 둔다 */
.turn-col.is-old { background: var(--sun-100); border: 1px solid var(--sun-200); }
.turn-col.is-old h2 { color: var(--navy-500); }
.turn-col.is-old p { color: var(--navy-500); }

/* 오른쪽 — GRIP IT. 한색으로 살린다 */
.turn-col.is-new {
  background: #fff; border: 2px solid var(--blue-500);
  box-shadow: 0 10px 26px rgba(22, 104, 216, 0.10);
}
.turn-col.is-new h2 { color: var(--blue-600); }

/* 두 칸의 예시 대사 — 같은 자리에서 대비된다 */
.sample {
  margin: 0.4rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px;
  font-size: 1.02rem; font-weight: 700;
}
.turn-col.is-old .sample { background: #fff; color: var(--navy-700); border: 1px dashed var(--sun-200); }
.turn-col.is-new .sample { background: var(--blue-100); color: var(--navy-900); }

/* 프롬프트 줄 — 두 칸 아래를 가로로 잇는다 */
.prompt-line {
  display: block; width: 100%; height: auto;
  margin: 1.5rem 0 0; border-radius: 12px;
  border: 1px solid var(--sun-200);
}
@media (max-width: 860px) { .turn { grid-template-columns: 1fr; } }