/* dragonward.studio — 종이 위의 손그림. 색은 위계에만.
 *
 * 서체는 우리 서버에서 낸다(Fontshare CDN을 원격으로 부르면 방문자 IP가 넘어간다).
 * Erode(제목·본문)와 Satoshi(내비·버튼·작은 글)는 Fontshare 무료 상업용 라이선스다.
 */
@font-face { font-family:"Erode"; src:url("/fonts/Erode-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Erode"; src:url("/fonts/Erode-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Erode"; src:url("/fonts/Erode-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Erode"; src:url("/fonts/Erode-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/fonts/Satoshi-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/fonts/Satoshi-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/fonts/Satoshi-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  color-scheme: light dark;
  --paper:    #FBF9F3;      /* 종이 */
  --paper-2:  #F2EFE7;      /* 오트. 카드·판의 기본 층. 그림자 대신 이 한 단계로 깊이를 만든다 */
  --dot:      rgba(42,41,37,.16);
  --ink:      #2A2925;
  --ink-2:    rgba(42,41,37,.66);
  --ink-3:    rgba(42,41,37,.46);
  --line:     rgba(42,41,37,.14);
  --mint:     #D6F3DC;
  --mint-2:   #BFEACB;
  --pill:     #2A2925;
  --on-pill:  #FBF9F3;
  --doodle-filter: none;
  --serif: "Erode", Georgia, "Times New Roman", serif;
  --sans:  "Satoshi", "Helvetica Neue", Arial, sans-serif;
  /* 타이포 스케일. 장3도(1.25) 한 줄로 고정한다. 굵기는 400·500·600 셋뿐 */
  --t-1: 13px; --t0: 15px; --t1: 17px; --t2: 21px; --t3: 26px; --t4: 33px; --t5: 41px; --t6: 51px;
  /* 간격 스케일 */
  --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.16,1,.3,1);
  --frame: 83ms;                /* 손그림 한 장의 길이. 영상에서 뽑은 초당 12장 */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #1C1B18; --paper-2: #22211D; --dot: rgba(241,238,230,.14);
    --ink: #F1EEE6; --ink-2: rgba(241,238,230,.68); --ink-3: rgba(241,238,230,.48);
    --line: rgba(241,238,230,.14); --mint: #23382B; --mint-2: #2C4636; --pill: #F1EEE6; --on-pill: #1C1B18;
    --doodle-filter: invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] { --paper: #1C1B18; --paper-2: #22211D; --dot: rgba(241,238,230,.14);
    --ink: #F1EEE6; --ink-2: rgba(241,238,230,.68); --ink-3: rgba(241,238,230,.48);
    --line: rgba(241,238,230,.14); --mint: #23382B; --mint-2: #2C4636; --pill: #F1EEE6; --on-pill: #1C1B18;
    --doodle-filter: invert(1) hue-rotate(180deg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: var(--t1); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.wrap { padding-inline: var(--gutter); }

/* ── 손그림 프레임 애니메이션 ─────────────────────────────
   같은 장면을 8장 그린 시트를 가로 스프라이트로 굽고, steps()로 한 장씩 넘긴다.
   퍼센트 background-position은 (상자 − 이미지) 기준이라 n장짜리의 마지막 장이 100%다. */
.anim {
  aspect-ratio: var(--ar);
  background: var(--sprite) no-repeat 0 0 / calc(100% * var(--n)) 100%;
  filter: var(--doodle-filter); pointer-events: none; user-select: none;
}
.js .anim[data-sprite] { background-image: none !important; }
.anim.n6 { --n: 6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .anim { background-image: var(--sprite-dark, var(--sprite)); filter: none; } }
:root[data-theme="dark"] .anim { background-image: var(--sprite-dark, var(--sprite)); filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .anim.n6 { filter: var(--doodle-filter); } }
:root[data-theme="dark"] .anim.n6 { filter: var(--doodle-filter); } .anim.n8 { --n: 8; } .anim.n10 { --n: 10; } .anim.n11 { --n: 11; } .anim.n16 { --n: 16; }
@media (prefers-reduced-motion: reduce) { .anim { background-position: 100% 0; } }

/* 색 다섯. 그림 속 "생각/앱"의 색이 곧 그 그림이 사는 판의 색이다. 글자는 늘 먹 */
:root {
  --sand: #EFE8DA;
  --mint-t: #E3F5E8; --sky-t: #E4F0FA; --butter-t: #FBF3D2; --lilac-t: #ECE8F7; --peach-t: #FCE8E0; --rose-t: #FBE6EC; --aqua-t: #E4F6F4;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sand: #2A2721; --mint-t: #21322A; --sky-t: #212C36; --butter-t: #332F1F; --lilac-t: #2B2836; --peach-t: #362A26; } }
:root[data-theme="dark"] { --sand: #2A2721; --mint-t: #21322A; --sky-t: #212C36; --butter-t: #332F1F; --lilac-t: #2B2836; --peach-t: #362A26; }

/* 배경에 종이 결. 장식이 아니라 "이 페이지는 종이다"라는 전제를 붙드는 장치다.
   실제 크기에서 결이 눈에 띄면 먼지가 된다. 밝은 종이는 결을 더 받고, 어두운 면은
   같은 세기에서 센서 노이즈처럼 보여서 더 약하게 준다. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); opacity: .045;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { opacity: .028; } }
:root[data-theme="dark"] body::after { opacity: .028; }

/* ── 내비 ─────────────────────────────────────────────── */
.theme { width: 34px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.theme span { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform .4s var(--ease); }
.theme:hover span { transform: rotate(180deg); }
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 5; height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--gutter); font-family: var(--sans); font-size: var(--t0);
}
.nav .mark { font-family: var(--serif); font-weight: 600; font-size: var(--t2); letter-spacing: -.01em; text-decoration: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.nav li a:not(.pill) { text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 0 1.5px; transition: background-size .3s var(--ease); }
.nav li a:not(.pill):hover { background-size: 100% 1.5px; }
.pill {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px;
  background: var(--pill); color: var(--on-pill); font-family: var(--sans); font-weight: 500; font-size: var(--t0);
  text-decoration: none; transition: transform .18s var(--ease), background .18s var(--ease);
}
.pill:hover { transform: translateY(-2px) rotate(-1.5deg); }
.pill:active { transform: scale(.97); }
/* 좁은 화면에선 섹션 링크만 접는다. 순서로 숨기면 항목이 늘 때 조용히 깨진다(Say hello가 사라졌었다). */
@media (max-width: 720px) { .nav .only-wide { display: none; } }

/* ── 첫 화면: 가운데 제목, 둘레에 그림 넷 ──────────────────── */
.hero { position: relative; min-height: 100dvh; padding: 120px var(--gutter) 80px; display: grid; place-items: center; overflow: hidden; }
.hero-copy { text-align: center; position: relative; z-index: 2; max-width: 720px; }
.hero h1 { text-wrap: balance; font-weight: 400; font-size: clamp(var(--t4), 4.2vw, 56px); line-height: 1.12; letter-spacing: -.012em; margin: 0 auto 18px; }
/* 형광펜은 핵심 구절 하나에만. 글자 뒤, 종이 위 */
.hero h1 .hl { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.hero h1 .hl .anim { position: absolute; left: 50%; top: 58%; width: 108%; height: 1.15em; aspect-ratio: auto; translate: -50% -50%; z-index: -1; filter: none; opacity: .85; }
.hero .sub { text-wrap: pretty; font-family: var(--sans); font-size: var(--t1); color: var(--ink-2); max-width: 30em; margin: 0 auto; }

/* 그림은 제목 밖 네 귀퉁이에 비대칭으로. 자리 이름만 쓰고 그림은 HTML에서 갈아끼운다. */
.hero > .anim { position: absolute; z-index: 0; pointer-events: none }
.hero > .anim { --hh: clamp(110px, 10.5vw, 160px); height: var(--hh); width: calc(var(--hh) * (var(--ar))) }
.p-tl { left: 8%; top: 20% }
.p-tr { right: 11%; top: 15% }
.hero > .p-tr { --hh: clamp(150px, 14.5vw, 220px) }   /* 풍선 위, 개구리 아래로 세로가 긴 그림이라 높이를 더 준다 */
.p-bl { left: 9%; bottom: 15% }
.p-br { right: 7%; bottom: 14% }
@media (max-width: 760px) {
  /* 좁은 화면에선 "We make" 한 줄 고아를 막으려고 형광펜 칸을 풀어 준다 */
  .hero h1 .hl { display: inline; white-space: normal }
  .hero h1 .hl .anim { display: none }
  /* 좁은 화면엔 고양이 하나만, 크게 */
  .hero > .p-tl, .hero > .p-bl, .hero > .p-br { display: none }
  .hero > .p-tr { position: static; --hh: min(240px, 58vw); margin: var(--s-6) auto 0 }
}

.idx:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .idx:hover { transform: none; } }

/* ── Work: 점 격자 노트 위에 테이프로 붙인 폰 ─────────────── */
.work {
  position: relative; padding-block: var(--s-32) var(--s-24);
  background: var(--paper);
}
.work .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; max-width: var(--wrap); margin-inline: auto; }
.panel { background: var(--paper-2); border-radius: 24px; padding: clamp(24px, 3vw, 40px); max-width: 400px; margin-inline: auto; }
.shot { position: relative; width: min(100%, 200px); margin-inline: auto; transform: rotate(-2deg); }
.shot img { border-radius: 22px; box-shadow: 0 24px 40px -28px rgba(42,41,37,.45); }
.shot::before, .shot::after {   /* 종이 테이프 두 조각 */
  content: ""; position: absolute; z-index: 2; width: 84px; height: 22px; background: rgba(255,255,255,.6);
  box-shadow: 0 1px 2px rgba(42,41,37,.12); backdrop-filter: blur(1px);
}
.shot::before { left: -28px; top: 18px; transform: rotate(-38deg); }
.shot::after { right: -28px; bottom: 24px; transform: rotate(-34deg); }
.label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-4); }
.work h2 { font-weight: 600; font-size: var(--t5); line-height: 1.1; margin: 0 0 var(--s-3); }
.work .kicker { font-family: var(--sans); color: var(--ink-2); font-size: var(--t0); margin: 0 0 var(--s-6); }
.work p { margin: 0 0 var(--s-4); font-size: var(--t2); line-height: 1.5; max-width: 24em; }
.work p:last-child { margin: 0; }
.link { text-decoration: none; background: linear-gradient(var(--mint-2), var(--mint-2)) no-repeat 0 88% / 100% .45em; padding: 0 2px; transition: background-size .3s var(--ease); }
::selection { background: var(--mint-2); }
.link:hover { background-size: 100% 100%; }
@media (max-width: 860px) { .work .grid { grid-template-columns: 1fr; row-gap: 40px; } .panel { max-width: 320px; } .shot { width: min(100%, 180px); } }

/* ── Studio: 편집 그리드. 제목 왼쪽, 보조 문단 오른쪽, 그 아래 색 판 셋 ─── */
.studio { padding-block: var(--s-24) var(--s-32); max-width: var(--wrap); margin-inline: auto; }
.studio .head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; margin-bottom: var(--s-12); }
.studio h2 { font-weight: 600; font-size: var(--t5); line-height: 1.1; margin: 0; }
.studio .head p { margin: 0; font-size: var(--t2); line-height: 1.5; color: var(--ink-2); max-width: 26em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
.idx { transition: transform .5s var(--ease), background-color .5s var(--ease); background: var(--paper-2); border-radius: 24px; padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); }
/* 그림 무대. 높이를 고정해 세 카드의 글 시작선을 맞춘다. 그림은 무대 안에서 비율대로 들어간다 */
.idx .stage { --h: 150px; height: var(--h); display: grid; place-items: center; }
.idx .stage .anim { margin: 0; width: min(100%, calc(var(--h) * (var(--ar)))); }
/* 색 판 위의 그림은 종이색 면이다. 다크모드에서도 반전하지 않는다(판이 어두워지고 면은 밝게 남는다) */
.idx .anim, .contact .anim { filter: var(--doodle-filter); }
@media (max-width: 860px) { .idx .stage { --h: 150px; } }
.idx.sky { --tint: var(--sky-t); } .idx.butter { --tint: var(--butter-t); } .idx.lilac { --tint: var(--lilac-t); }
.idx p { margin: 0; font-size: var(--t1); line-height: 1.5; }
.idx .link { background-image: linear-gradient(rgba(42,41,37,.14), rgba(42,41,37,.14)); }
.idx p b { font-weight: 600; }
/* 소개. 카드 아래, 같은 편집 그리드 */
/* 스튜디오 소개는 연락처 다음, 푸터 바로 위. 페이지가 큰 판에서 조용한 글로 잦아든다.
   연락처 판이 오트 카드라 스스로 구분되므로 위에 선을 긋지 않는다. */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px);
  max-width: var(--wrap); margin-inline: auto; padding-block: 0 var(--s-24); }
.about h3 { font-weight: 600; font-size: var(--t2); margin: 0; }
.about p { margin: 0; font-size: var(--t1); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
@media (max-width: 860px) { .studio .head { grid-template-columns: 1fr; row-gap: var(--s-3); } .cards { grid-template-columns: 1fr; } .about { grid-template-columns: 1fr; row-gap: var(--s-3); } }

/* ── Contact: 민트 띠, 스티커 떼어 붙이기 ──────────────────── */
.contact { position: relative; padding-block: 0 var(--s-24); }
.contact .grid { background: var(--paper-2); border-radius: 24px; padding: clamp(36px, 5vw, 64px); max-width: var(--wrap); margin-inline: auto; }
.contact .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(32px, 5vw, 80px); }
.contact h2 { font-weight: 400; font-size: var(--t3); margin: 0 0 var(--s-3); }
.mail {
  display: inline-block; font-weight: 600; font-size: clamp(var(--t3), 2.8vw, var(--t5)); line-height: 1.05; letter-spacing: -.02em;
  text-decoration: none; overflow-wrap: normal; padding-bottom: .06em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 3px; transition: background-size .5s var(--ease);
}
.mail:hover, .mail:focus-visible { background-size: 100% 3px; outline: none; }
.contact .note { font-family: var(--sans); margin: var(--s-6) 0 0; max-width: 32em; color: var(--ink-2); font-size: var(--t0); }
.contact .anim { --hh: min(220px, 42vw); height: var(--hh); width: calc(var(--hh) * (var(--ar))); max-width: 100%; margin-inline: auto; }
@media (max-width: 860px) { .contact .grid { grid-template-columns: 1fr; row-gap: 36px; } }

/* ── Footer: 먹색 띠. 페이지에서 유일한 고대비 앵커 ──────────────── */
/* 푸터에 남는 것은 법적 고지 한 줄뿐이다. Work가 앱을, Contact가 메일을 이미 크게 보여주므로
   푸터가 그것들을 또 나열할 이유가 없다. 내용이 한 줄이면 구역으로 떼어 놓을 이유도 없어서
   띠를 두지 않는다. 윗변의 땅선은 캐릭터들이 밟고 선 그 선을 페이지 폭으로 늘린 것이다. */
footer { background: transparent; color: var(--ink-3); font-family: var(--sans); font-size: var(--t-1); }
footer .rule { display: block; width: 100%; height: 13px; color: var(--ink); opacity: .45; }
footer .legal { max-width: var(--wrap); margin: 0 auto; padding: var(--s-12) var(--gutter) var(--s-16); text-align: center; }

/* ── 404 ──────────────────────────────────────────────── */
.center { min-height: 100dvh; display: grid; place-content: center start; }

/* ── 모션 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { animation: rise .9s var(--ease) both; }
  .js .rise:nth-child(2) { animation-delay: .1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }

  /* 장수는 --n 하나로 정한다. n장 스프라이트의 끝 위치는 100%·n/(n−1). */
  .anim { animation: play calc(var(--frame) * var(--n)) steps(var(--n)) infinite; }
  .anim.pp { animation-direction: alternate; }
  /* Studio 카드는 화면에 들어오기 전엔 멈춰 있다(두더지가 카드가 보일 때 나오도록) */
  .js .idx.reveal:not(.in) .anim { animation-play-state: paused; }   /* 앞뒤로 왕복: 끝에서 처음으로 점프하지 않는다 */
  .anim.n6  { animation: play6 calc(var(--frame) * 14) infinite; }
  @keyframes play { to { background-position: calc(100% * var(--n) / (var(--n) - 1)) 0; } }
  @keyframes play6  { 0% { background-position: 0 0; animation-timing-function: steps(6, jump-none); } 43% { background-position: 100% 0; } 100% { background-position: 100% 0; } }

}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* IconFold product and reference pages: shared studio type, calm readable measure. */
.product-main { max-width: 1240px; margin: 0 auto; padding: 152px var(--gutter) 80px; }
.product-heading { max-width: 850px; margin-bottom: 64px; }
.product-heading h1 { font: 400 clamp(2.6rem, 5vw, 4.25rem)/1.06 var(--serif); letter-spacing: -.025em; margin: 16px 0 24px; text-wrap: balance; }
.product-heading .lede { font: 400 1.2rem/1.65 var(--sans); max-width: 42em; color: var(--ink-2); }
.release-note { font: 400 .9rem/1.6 var(--sans); color: var(--ink-2); max-width: 48em; }
.product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; font-family: var(--sans); }
.support-email { display: inline-block; font: 500 clamp(1rem, 3vw, 1.5rem)/1.5 var(--sans); text-underline-offset: .2em; overflow-wrap: anywhere; }
.product-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.product-grid figure { margin: 0; }
.product-grid img { width: 100%; border-radius: 20px; }
.product-grid figcaption { font: 400 .8rem/1.5 var(--sans); color: var(--ink-2); padding-top: 16px; }
.product-details h2, .document-body h2 { font: 500 1.7rem/1.2 var(--serif); letter-spacing: -.015em; margin: 0 0 16px; }
.product-details p, .document-body { font: 400 1rem/1.75 var(--sans); }
.product-details p { margin: 0; color: var(--ink-2); }
.product-details section + section { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.document-body { max-width: 70ch; }
.document-body section + section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.document-body p { margin: 0 0 16px; }
.document-body ol { padding-left: 1.4em; }
.document-body li + li { margin-top: 12px; }
.document-body a, .product-footer a { text-underline-offset: .2em; }
.product-footer { padding: 32px var(--gutter); border-top: 1px solid var(--line); }
.product-footer nav { display: flex; gap: 24px; flex-wrap: wrap; font: 400 .95rem/1.5 var(--sans); }
.product-footer .legal { margin: 24px 0 0; text-align: left; }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 12px; background: var(--paper); color: var(--ink); font-family: var(--sans); }
.skip-link:focus { top: 12px; }
@media (max-width: 720px) {
  .product-main { padding-top: 120px; padding-bottom: 48px; }
  .product-heading { margin-bottom: 40px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-grid figure { max-width: 420px; margin-inline: auto; }
  .product-page .nav { gap: 12px; }
  .product-page .nav ul { gap: 16px; }
}