/* Deno MCP 사이트 — Plum Noir Studio (DENO 디자인 정본 토큰 그대로)
   글꼴 역할: 워드마크·히어로 = Dazzle Unicase Bold / 섹션 제목·설명 = Legitima Regular /
   한국어 선언문 = Source Han Sans K Heavy(로컬은 Noto Sans KR Black) / 본문 = Noto Sans KR /
   경로·기술값 = Parabolica.  어도비 글꼴은 웹 프로젝트 임베드로만 쓰고 파일을 넣지 않는다. */

:root {
  --bg: #0F0E12;
  --surface: #1B1320;
  --raised: #2E1E38;
  --plum: #5A386B;
  --signal: #F2FF59;
  --text: #E8E6E1;
  --text-strong: #F0EEE8;
  --text-2: #A3A6AD;
  --control: #2A2A31;
  --matte: #1D1524;          /* 비교 구획 오른쪽 열, 진화 고리 판: 검정과 자두 사이의 낮은 톤 */
  --rule: rgba(90, 56, 107, 0.42);   /* 구분선: 회색 대신 낮은 투명도의 자두 */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  --f-brand: "dazzle-unicase", "Dazzle Unicase", "Dazzle Unicase Bold", "Noto Sans KR", sans-serif;
  --f-title: "legitima", "Legitima", "Source Serif Pro", Georgia, "Noto Serif KR", serif;
  --f-kr-heavy: "source-han-sans-korean", "Source Han Sans K", "Noto Sans KR", sans-serif;
  --f-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-tech: "parabolica", "Parabolica", "Parabolica Medium", "Noto Sans KR", sans-serif;

  --pad-x: clamp(1.25rem, 6vw, 6rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 매트 결: 로고 마스터의 종이 같은 표면을 페이지 재질로. 아주 옅게, 장식이 아니라 재질. */
.matte { position: relative; isolation: isolate; }
.matte::after { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 160px 160px; opacity: 0.055; mix-blend-mode: soft-light; pointer-events: none; z-index: 0; }
.matte > * { position: relative; z-index: 1; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  word-break: keep-all;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.todo { color: var(--text-2); }

h2 {
  font-family: var(--f-title), "Noto Serif KR", serif; /* 라틴은 Legitima(어도비), 한글은 Noto Serif KR */
  font-weight: 600;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  margin: 0;
  color: var(--text-strong);
}
.lede { max-width: 36rem; color: var(--text-2); margin: 0.9rem 0 2.6rem; font-size: 1.05rem; }

/* 상단 --------------------------------------------------------------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem var(--pad-x);
}
.top-brand { font-family: var(--f-brand); font-size: 1.1rem; letter-spacing: 0.02em; text-decoration: none; color: var(--text-strong); }
.top-nav { display: flex; gap: 1.8rem; }
.top-nav a { text-decoration: none; color: var(--text-2); font-size: 0.95rem; }
.top-nav a:hover { color: var(--text-strong); }

/* 첫 화면: 로고 → 워드마크 → 한 줄 → 복사 ---------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1rem, 4vw, 3rem) var(--pad-x) clamp(2rem, 5vw, 4rem);
  position: relative;
  isolation: isolate;
}
.hero::before {
  /* 조용한 자두색 톤 영역. 장식 그라데이션이 아니라 평평한 두 톤. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  /* 로고 마스터의 바탕 톤(#06040A 부근)과 같은 어둠으로 맞춰 테가 생기지 않게 한다 */
  background: #08060C;
  z-index: -1;
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
/* 첫 화면 배경: 영화 제작 책상(콘티·필름·슬레이트·렌즈·색 견본·파형)이 로고 아래 띠에 낮은 톤으로 */
.hero { overflow: hidden; }
.hero-band {
  position: absolute; left: 0; right: 0; bottom: -6%; height: 58%;
  background: url("media/hero-desk.jpg") center 40% / cover no-repeat;
  opacity: 0.32;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 80%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}
.hero-band::after { content: ""; position: absolute; inset: 0; background: rgba(15, 14, 18, 0.55); }
.hero .mark, .hero .wordmark, .hero .statement, .hero .hero-action { position: relative; z-index: 2; }
.mark {
  width: min(420px, 62vw);
  height: auto;
  display: block;
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 82%);
}
.wordmark {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: -0.4em 0 0;
  color: var(--text-strong);
}
.statement {
  font-family: var(--f-kr-heavy);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: -0.01em;
  margin: 1.1rem 0 0;
  color: var(--text);
}
.hero-action { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-top: 2.2rem; }
.hero-note { margin: 0.2rem 0 0; max-width: 30rem; color: var(--text); font-size: 1.05rem; }
.hero-faq { color: var(--text-2); font-size: 0.92rem; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--plum); }
.hero-faq:hover { color: var(--text-strong); }

.copy {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--signal);
  color: #0F0E12;
  border: 0;
  border-radius: 3px;
  padding: 0.85rem 1.4rem 0.85rem 1.1rem;
  cursor: pointer;
  font-family: var(--f-body);
}
.copy:hover { background: #E9F84A; }
.copy-key { font-family: var(--f-brand); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; }
.copy-label { font-weight: 700; font-size: 1.05rem; }
.copy.done { background: var(--text-strong); }
.copy-secondary { background: transparent; color: var(--text-strong); border: 1px solid var(--plum); }
.copy-secondary:hover { background: var(--surface); }

/* 관계 한 장: 지침 → 에이전트 → 작업 폴더 — 첫 화면과 같은 매트한 톤, 기울임·종이 없음 ------ */
.relation { padding: clamp(2rem, 5vw, 4rem) var(--pad-x) clamp(3rem, 6vw, 5rem); }
.track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1.1fr) 4rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  max-width: 72rem;
  margin: 0 auto;
}
.step {
  background: var(--matte);
  border: 1px solid var(--rule);
  padding: 1.6rem 1.7rem 1.7rem;
  display: flex;
  flex-direction: column;
}
.step p { margin: 0.6rem 0 1rem; font-size: 0.95rem; line-height: 1.65; color: var(--text-2); }
.step-num { font-family: var(--f-brand); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--text-2); }
.step-title { font-family: var(--f-body); font-weight: 700; font-size: 1.35rem; margin: 0.7rem 0 0; color: var(--text-strong); }
.folder { list-style: none; margin: 0.9rem 0 0; padding: 0; font-family: var(--f-tech); font-size: 0.95rem; line-height: 1.75; color: var(--text); }
.folder li::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; border: 1px solid var(--plum); margin-right: 0.6em; vertical-align: middle; }
.folder li:last-child::before { background: var(--plum); }
/* 연결선: 얇은 자두색 선 + 끝의 작은 사각 마디 */
.link { position: relative; align-self: center; height: 1px; background: var(--rule); }
.link::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; background: var(--plum); }
.quiet { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--plum); cursor: pointer; margin-top: auto; align-self: flex-start; }
.quiet:hover { text-decoration-color: var(--text); }
.doc {
  max-width: 72rem;
  margin: 2rem auto 0;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--control);
  color: var(--text);
  font-family: var(--f-tech);
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* 연결하면 — 흔히 겪는 일 / 연결하면, 짝 비교 + 진화 고리 ---------------- */
.stack { padding: clamp(3rem, 6vw, 5rem) var(--pad-x); background: var(--surface); }
.lede.wide { max-width: 44rem; }
.pair { max-width: 74rem; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 3.5rem minmax(0, 1.05fr); }
.pair .ico { padding: 0.75rem 0.4rem 0.75rem 0; display: flex; align-items: center; }
.pair .ico img { width: 3.4rem; height: 3.4rem; display: block; border-radius: 4px; }
.pair .head.ico { padding: 0; }
.pair > * { padding: 1.05rem 1.5rem; border-top: 1px solid var(--rule); }
.pair .head { border-top: 0; padding-top: 0; padding-bottom: 1rem; font-size: 0.92rem; color: var(--text-2); }
.pair .head.after { color: var(--text-strong); position: relative; }
.pair .head.after::before { content: ""; position: absolute; left: 1.5rem; top: 0; width: 2.4rem; height: 2px; background: var(--signal); }
.pair .head.after { padding-top: 1.1rem; }
.pair .mid { padding-left: 0; padding-right: 0; display: flex; align-items: center; border-top-color: transparent; }
.pair .mid::before { content: ""; width: 100%; height: 1px; background: var(--rule); }
.pair .head.mid::before { display: none; }
.pair .after { background: var(--matte); color: var(--text-strong); font-weight: 500; }
.pair .after:not(.head) { border-top-color: rgba(232, 230, 225, 0.07); }
.pair .before { color: var(--text-2); }
.pair .last { border-bottom: 1px solid var(--rule); }
.pair .after.last { border-bottom-color: rgba(232, 230, 225, 0.07); }
.pair .head.mid, .pair .mid.last { border-bottom: 0; }
.pair .after.head, .pair .after { position: relative; }
.pair .after::after { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 160px 160px; opacity: 0.07; mix-blend-mode: soft-light; pointer-events: none; }
.loop { max-width: 74rem; margin-top: 3.2rem; display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: stretch; }
.loop .node { background: var(--matte); border: 1px solid var(--rule); padding: 1.2rem 1.4rem; position: relative; }
.loop .node::after { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 160px 160px; opacity: 0.07; mix-blend-mode: soft-light; pointer-events: none; }
.loop .node b { display: block; font-family: "Noto Serif KR", serif; font-weight: 600; font-size: 1.1rem; color: var(--text-strong); margin-bottom: 0.3rem; }
.loop .node span { color: var(--text-2); font-size: 0.93rem; line-height: 1.6; }
.loop .tie { align-self: center; height: 1px; background: var(--rule); position: relative; }
.loop .tie::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; background: var(--plum); }
.loop-caption { max-width: 74rem; margin: 1.1rem 0 0; text-align: center; color: var(--text-2); font-size: 0.95rem; }

/* 한 줄에서 한 편 ------------------------------------------------------ */
.reward { padding: clamp(3rem, 6vw, 5rem) var(--pad-x); }
.one { display: grid; grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 0.8fr); align-items: center; max-width: 72rem; }
.idea { display: flex; flex-direction: column; gap: 1.4rem; }
.idea-kicker { color: var(--text-2); font-size: 0.95rem; }
.idea-line { font-family: "Noto Serif KR", serif; font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.3; color: var(--text-strong); margin: 0; text-wrap: pretty; }
.idea-line::before { content: "\201C"; color: var(--plum); }
.idea-line::after { content: "\201D"; color: var(--plum); }
.did { list-style: none; margin: 0.2rem 0 0; padding: 0; border-top: 1px solid var(--control); max-width: 30rem; }
.did li { padding: 0.7rem 0; border-bottom: 1px solid var(--control); font-size: 1rem; color: var(--text); }
.did li::before { content: ""; display: inline-block; width: 0.9rem; height: 1px; background: var(--plum); vertical-align: middle; margin-right: 0.7rem; }
.one .tie { height: 1px; background: var(--plum); position: relative; margin: 0 0.6rem; }
.one .tie::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; background: var(--plum); }
.result { display: flex; flex-direction: column; gap: 0.7rem; }
.result video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: #0A0810; border: 1px solid var(--control); }
.result-cap { color: var(--text-2); font-size: 0.92rem; text-align: center; }
.result-cap b { color: var(--text-strong); font-family: "Noto Serif KR", serif; font-weight: 600; }

/* 이 체계로 만든 작품 — 같은 크기 타일의 갤러리 ------------------------ */
.work { padding: clamp(3rem, 6vw, 5rem) var(--pad-x); }
.reel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 74rem;
}
.clip { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.clip video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--matte);
  border: 1px solid var(--rule);
}
.clip figcaption { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; color: var(--text-2); }
.clip figcaption b { color: var(--text-strong); font-weight: 600; font-family: "Noto Serif KR", serif; font-size: 1rem; }

/* 궁금한 것 ----------------------------------------------------------- */
.faq { padding: clamp(3rem, 6vw, 5rem) var(--pad-x); }
.qa { max-width: 44rem; border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-family: "Noto Serif KR", serif; font-weight: 600; font-size: 1.15rem; color: var(--text-strong); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 0.55rem; height: 0.55rem; border: 1px solid var(--plum); flex: none; transition: background 0.2s ease; }
.qa details[open] summary::after { background: var(--plum); }
.qa p { margin: 0 0 1rem; color: var(--text); font-size: 1rem; line-height: 1.8; max-width: 40rem; }
.qa p:last-child { margin-bottom: 1.4rem; }
.qa code { font-family: var(--f-tech); font-size: 0.95em; background: var(--matte); padding: 0.1em 0.4em; border: 1px solid var(--rule); }

/* 요금·바닥 ----------------------------------------------------------- */
.pricing { padding: clamp(3rem, 6vw, 5rem) var(--pad-x); background: var(--surface); }
.price-line { font-family: "Noto Serif KR", serif; font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--text-strong); margin: 1rem 0 2rem; max-width: 40rem; }
.pricing .cta { margin-top: 0.5rem; }
.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.6rem var(--pad-x) 2.2rem;
  font-size: 0.9rem;
  color: var(--text-2);
}
.foot > div:first-child { font-family: var(--f-brand); color: var(--text); }
.foot-links { display: flex; gap: 1.4rem; }
.foot-links a { text-decoration: none; }

/* 첫 화면 한 번의 등장. 움직임 줄이기 설정이면 없음. ------------------ */
@media (prefers-reduced-motion: no-preference) {
  .mark, .wordmark, .statement, .hero-action { animation: settle 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .wordmark { animation-delay: 0.15s; }
  .statement { animation-delay: 0.3s; }
  .hero-action { animation-delay: 0.45s; }
  @keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* 좁은 화면 ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .track { grid-template-columns: 1fr; max-width: 30rem; }
  .link { width: 1px; height: 2.5rem; justify-self: center; }
  .link::after { right: -3px; top: auto; bottom: -1px; }
  /* 폰: 한 쌍을 카드 하나로 묶고 줄마다 꼬리표(지금 / 연결하면)를 붙인다 */
  .pair { grid-template-columns: 1fr; row-gap: 0; }
  .pair .head, .pair .mid { display: none; }
  .pair > * { padding: 0.9rem 1.1rem; }
  .pair .ico { margin-top: 0.9rem; padding: 0.8rem 1.1rem 0; border: 1px solid var(--rule); border-bottom: 0; background: var(--bg); }
  .pair .ico img { width: 2.6rem; height: 2.6rem; }
  .pair .before { margin-top: 0; border: 1px solid var(--rule); border-top: 0; border-bottom: 0; background: var(--bg); font-size: 0.95rem; padding-top: 0.5rem; }
  .pair .after { border: 1px solid var(--rule); border-top: 1px dashed var(--rule); font-size: 1rem; }
  .pair .last { border-bottom: 1px solid var(--rule); }
  .pair .before::before, .pair .after::before { display: block; font-family: var(--f-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
  .pair .before::before { content: "지금"; color: var(--text-2); }
  .pair .after::before { content: "Deno MCP를 연결하면"; color: var(--text-strong); }
  .pair .after { position: relative; }
  .pair .after::after { content: ""; display: block; position: absolute; left: 0; top: 1.05rem; width: 4px; height: 0.9rem; background: var(--signal); opacity: 1; mix-blend-mode: normal; }
  .loop { grid-template-columns: 1fr; row-gap: 0.8rem; }
  .loop .tie { display: none; }
  .one { grid-template-columns: 1fr; }
  .one .tie { width: 1px; height: 2.5rem; justify-self: center; margin: 0.5rem 0; }
  .one .tie::after { right: -3px; top: auto; bottom: -1px; }
  .reel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .top-nav { display: none; }
  .reel { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
}