/* nomake — 종이 위 파란 볼펜(90년대 시세이도 × 슬램덩크 광고 결), 위에 머리글, 손그림 장면, 그 아래 서비스 소개. */

/* 손글씨 글꼴은 굵기마다 고정된 파일을 직접 둔다(Fontsource, OFL). 구글 폰트의 가변 글꼴은 굵게 쓰면
   크롬이 글자 경계를 좁게 잡아 단어 끝 글자(No 의 o, make 의 e)의 오른쪽을 잘라 그린다. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/caveat-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/caveat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/caveat-latin-700-normal.woff2") format("woff2");
}

:root {
  --bg: #f6f5f0;   /* 종이 */
  --ink: #2b3c9e;  /* 볼펜 */
  --muted: #4d5794;
  --dim: #5f6490;
  --rule: #d8d7e6;
  --header: 68px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  /* 손으로 그은 밑줄 */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C9 2.5 15 6.5 23 4S38 2 45 4.5 56 5 59 3' fill='none' stroke='%232b3c9e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  /* 종이 결: 아주 옅은 잡티 */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .2 0 0 0 0 .5 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 볼펜으로 빗금 친 결(큰 No 의 속). 40px 마다 이어진다 */
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%232b3c9e' stroke-linecap='round'%3E%3Cpath d='M-6 46L46 -6' stroke-width='1.7'/%3E%3Cpath d='M2 46L54 -6' stroke-width='2.3'/%3E%3Cpath d='M10 46L62 -6' stroke-width='1.3'/%3E%3Cpath d='M18 46L70 -6' stroke-width='2'/%3E%3Cpath d='M26 46L78 -6' stroke-width='1.5'/%3E%3Cpath d='M-46 46L6 -6' stroke-width='1.7'/%3E%3Cpath d='M-38 46L14 -6' stroke-width='2.3'/%3E%3Cpath d='M-30 46L22 -6' stroke-width='1.3'/%3E%3Cpath d='M-22 46L30 -6' stroke-width='2'/%3E%3Cpath d='M-14 46L38 -6' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* 종이 결과, 오래된 광고 화면처럼 살짝 푸른 가장자리. 맨 위에 덮어서 바탕색으로 채운 그림(채팅창 판 등)도 같은 종이로 보이게 한다 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: var(--paper), radial-gradient(ellipse at 50% 45%, transparent 45%, rgb(43 60 158 / .06) 100%);
}

h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* ── 머리글: 장면과 같은 손글씨 ── */
.top {
  position: fixed; inset: 0 0 auto; z-index: 2;
  height: var(--header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 4vw, 44px);
  background: linear-gradient(var(--bg) 55%, transparent);
}
.logo {
  font-family: var(--hand); font-weight: 700;
  font-size: 32px; line-height: 1; letter-spacing: -0.01em;
}
.top nav { display: flex; gap: clamp(18px, 3.2vw, 36px); }
.top nav a, .tool-link {
  position: relative;
  font-family: var(--hand); font-weight: 600;
  font-size: 24px; line-height: 1;
  color: var(--muted);
  padding: 6px 0 8px;
  background: var(--squiggle) no-repeat left bottom / 0% 7px;
  transition: color .15s ease, background-size .25s cubic-bezier(.6, 0, .3, 1);
}
.top nav a:hover, .top nav a:focus-visible,
.tool-link:hover, .tool-link:focus-visible { color: var(--ink); background-size: 100% 7px; }
@media (max-width: 480px) {
  .logo { font-size: 26px; }
  .top nav { gap: 14px; }
  .top nav a { font-size: 19px; }
}

/* ── 첫 화면: 위는 3D 장면(hero.js, 남는 높이 전부), 아래는 서비스 줄. 둘 다 처음부터 한 화면에 ── */
main { display: grid; grid-template-rows: minmax(400px, 1fr) auto; min-height: 100vh; min-height: 100svh; }
.hero { position: relative; min-height: 0; overflow: clip; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 집중선: 쾅 하는 순간에만 */
.focus { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transform-origin: var(--fx, 50%) var(--fy, 50%); }
.focus path { fill: var(--ink); }

.copy {
  position: absolute; left: 16px; right: 16px; top: 61%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--hand); font-weight: 600; text-align: center;
}
.copy-line { font-size: clamp(24px, 3.4vw, 42px); line-height: 1.15; clip-path: inset(-30% 100% -30% -6%); }
/* Let's start: 파란 바탕 버튼. 처음부터 보이고, 둘레에 볼펜으로 한 번 더 그은 선 */
.cta {
  position: relative; margin-top: clamp(16px, 2.2vw, 24px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px 17px 34px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.cta-sketch { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.cta-sketch path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.cta-arrow { width: 26px; height: 20px; overflow: visible; transition: transform .2s ease; }
.cta-arrow path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cta:hover { transform: translateY(-2px) rotate(-1.5deg); }
.cta:hover .cta-arrow { transform: translateX(4px); }
.cta:active { transform: translateY(1px) scale(.97); }
.cta:focus-visible { outline-offset: 8px; border-radius: 999px; }
.replay {
  position: absolute; right: clamp(16px, 4vw, 44px); bottom: clamp(16px, 4vh, 36px);
  width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--ink); opacity: 0;
}
.replay svg { width: 100%; height: 100%; overflow: visible; }
.replay path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* WebGL 이 없을 때: 움직임 없이 마지막 장면만 */
.hero-fallback { display: none; }
.no-gl .hero canvas, .no-gl .replay { display: none; }
.no-gl .hero-fallback {
  display: block; position: absolute; left: 0; right: 0; top: 24%; margin: 0;
  text-align: center; font-family: var(--hand); font-weight: 700; line-height: 1; white-space: nowrap;
}
.no-gl .hero-fallback .no { font-size: clamp(120px, 22vw, 250px); }
.no-gl .hero-fallback .make { font-size: clamp(56px, 10vw, 110px); }
.no-gl .copy-line { clip-path: none; }
/* 큰 No: 볼펜 윤곽 + 빗금 */
.no {
  color: transparent;
  -webkit-text-stroke: 2.6px var(--ink);
  background: var(--hatch);
  -webkit-background-clip: text;
  background-clip: text;
}
.defs { position: absolute; width: 0; height: 0; }
.tool-icon path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tool { color: var(--ink); }

/* ── 서비스 줄 ── */
.tools {
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 6px clamp(16px, 4vw, 44px) clamp(16px, 3vh, 28px);
}
.tools h2 { font-family: var(--hand); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1; margin-bottom: 10px; }
.tool-list { display: grid; gap: 12px; }
@media (min-width: 760px) { .tool-list { grid-template-columns: 1fr 1fr; gap: 18px; } }

.tool {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center;
  padding: 14px 20px 16px;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.tool:hover { transform: translateY(-3px); }
/* 손으로 그린 테두리는 cards.js 가 이 자리에 그린다 */
.tool > .sketch-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tool-icon { grid-row: 1 / span 4; width: 120px; height: 75px; overflow: visible; }
.tool h3 { font-family: var(--hand); font-weight: 700; font-size: clamp(28px, 2.6vw, 34px); line-height: 1; }
.tagline { margin-top: 2px; font-family: var(--hand); font-weight: 500; font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); }
.desc { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.tool-link { justify-self: start; margin-top: 4px; color: var(--ink); font-size: 22px; padding: 2px 0 6px; }
.tool-link span { display: inline-block; margin-left: 6px; transition: transform .2s ease; }
/* 카드 어디를 눌러도 링크로 */
.tool-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.tool:hover .tool-link { background-size: 100% 7px; }
.tool:hover .tool-link span { transform: translateX(4px); }
/* 좁은 화면: 설명은 접고 이름·한 줄 소개·링크만 */
@media (max-width: 560px) {
  .tool { padding: 12px 16px 13px; column-gap: 14px; }
  .tool-icon { width: 84px; height: 53px; }
  .desc { display: none; }
  .tool-link { font-size: 20px; }
}

/* ── 바닥글 ── */
.foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px;
  padding: 28px clamp(18px, 4vw, 44px) 36px;
  border-top: 1px solid var(--rule);
}
.foot .logo { font-size: 26px; }
.foot p { font-size: 13px; color: var(--dim); }
.foot p a:hover { color: var(--ink); }

/* 404 등 다른 페이지 */
.notfound { min-height: 100svh; display: grid; place-items: center; }