/* ---------- 신년 손금 공통 바탕(세 화면이 맨 먼저 불러옴) ----------
   밝은 미색 한지 화면입니다(사용자 결정 2026-10-20: 대표 그림은 미색 한지, 손금 풀이·궁합의 밤 남색에 맞추지 않음).
   색은 아씨 그림에서 땄습니다: 바탕은 그림 한지(#f5eee3), 주 색은 다홍 치마, 보조 색은 연두 저고리·자주 끝동·금박.
   여기에는 색·글꼴·바탕·로고·단추·화면 틀·손 그림과 선만 둡니다. 화면마다의 모양은 style.css(첫 화면)·result.css(결과 카드)·talk.css(대화)에 있습니다. */

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

/* 큰 글씨는 여기어때 잘난체, 결과 글은 나눔스퀘어라운드, 감정서 그림은 페이퍼로지(내손내운 결과 화면과 같음) */
@font-face { font-family: "Jalnan"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* 한지와 먹 */
  --paper: #f5eee3;        /* 바탕(그림 한지와 같은 색이라 그림 끝이 바탕에 녹아듦) */
  --paper-2: #ece2d2;      /* 한 단 짙은 한지(칸 바탕·구분) */
  --card: #fffaf3;         /* 카드·말풍선 면 */
  --ink: #2b1d12;          /* 본문 먹색 */
  --ink-2: #5c4837;        /* 보조 글 */
  --ink-3: #8c7763;        /* 흐린 글·안내 */
  --rule: rgba(43, 29, 18, 0.12);   /* 얇은 테두리·구분선 */
  --veil: rgba(245, 238, 227, 0.86); /* 그림 위에 글을 올릴 때 까는 한지 막 */
  --shadow: 0 10px 28px rgba(74, 46, 24, 0.12);
  --shadow-sm: 0 4px 12px rgba(74, 46, 24, 0.1);

  /* 아씨 옷 색 */
  --red: #b3262e;          /* 다홍 치마: 주 단추·강조 */
  --red-2: #8c1b22;        /* 짙은 다홍: 눌림·굵은 강조 글 */
  --red-soft: #f7e1db;     /* 옅은 다홍 바탕 */
  --green: #6b7a22;        /* 연두 저고리(글자로 쓸 만큼 짙게) */
  --green-soft: #ecebc8;   /* 옅은 연두 바탕 */
  --purple: #5b2c6f;       /* 자주 끝동: 보조 강조 */
  --purple-soft: #eee2f1;
  --gold: #b7862c;         /* 금박: 점·테두리 장식 */
  --gold-soft: #f4e6c4;

  /* 운 세 가지(그래프 점·칸·감정서가 같은 색) */
  --c-love: #c23b3b;       /* 연애운: 다홍 */
  --c-work: #6b8a1f;       /* 일운·진로운: 연두 */
  --c-money: #c48a1c;      /* 재물운: 금 */

  --font-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-say: "Gowun Batang", serif;
  --font-name: "Diphylleia", serif;
  --font-ui: "NanumSquareRound", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-title: "Jalnan", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html, body { margin: 0; height: 100%; }
html { scrollbar-width: none; background: var(--paper); }
html::-webkit-scrollbar { display: none; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 화면 틀: 휴대폰 폭(480px까지) 한 줄. 넓은 화면에서는 가운데에 두고 둘레를 한 단 짙은 한지로 */
.app { position: relative; max-width: 480px; margin: 0 auto; background: var(--paper); }
@media (min-width: 481px) {
  html, body { background: var(--paper-2); }
  .app { box-shadow: 0 0 0 1px var(--rule); }
}

/* ---------- 로고: 갓 쓴 까치 + 내손내운 글자 + 手相 인장 ----------
   셋을 한 장으로 구운 그림(인생손금·궁합손금과 같은 brand-kkachi.webp)을 글자 높이로 씁니다.
   쓰는 법: <img class="logo" src="assets/brand-kkachi.webp" alt="내손내운"> */
.brand { display: inline-flex; align-items: center; gap: 4.4px; height: 30px; color: var(--ink); text-decoration: none; }
.logo { display: block; flex: none; width: auto; height: 30px; }   /* 홈페이지 로고와 같은 높이(사용자 2026-10-24) */

/* ---------- 단추 ----------
   주 단추는 다홍, 보조 단추는 한지 위 먹색 테두리입니다. 높이·둥글기·굵기는 인생손금 단추와 같습니다. */
.cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 54px; padding: 0 20px;
  border: 0; border-radius: 14px;
  background: var(--red);
  color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; text-decoration: none;
  box-shadow: 0 6px 16px rgba(179, 38, 46, 0.28);
  transition: transform 0.12s var(--ease-out), filter 0.15s ease, opacity 0.2s;
}
.cta:active { transform: scale(0.97); filter: brightness(0.94); }
.cta:disabled { opacity: 0.45; cursor: default; }
/* 가끔 지나가는 빛(첫 화면 시작 단추·사진 확인 단추·결제 단추) */
.cta.shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.42) 50%, transparent 65%);
  translate: -120% 0;
  animation: cta-sheen 4.2s ease-in-out 1.4s infinite;
}
@keyframes cta-sheen { 0% { translate: -120% 0; } 28%, 100% { translate: 120% 0; } }
.cta-sub { border: 1px solid rgba(43, 29, 18, 0.22); background: var(--card); color: var(--ink); box-shadow: none; }

/* ---------- 손 그림과 판독한 선(SN.handArt·SN.handInner) ----------
   손 그림은 내손내운 결과 화면과 같은 그림이고 선 색도 같습니다(선은 살색 손바닥 위에 그려져 바탕색과 상관없음).
   무리 이름: l-faint(이야기하지 않는 선) · l-soft(곁들이는 선) · l-gold(이 장의 선) · l-pink(연애운 장의 선) */
.art {
  position: relative;
  align-self: center;
  flex: 1 1 0;
  min-height: 120px;
  max-height: 380px;
  aspect-ratio: 3 / 4;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
}
/* 2:3 그림이 상자 높이의 1.125배라서 소매는 흐려지는 곳 아래로 빠집니다 */
.art-in { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 3; }
/* 오른손은 뒤집어 저장한 그림 파일과 뒤집은 선 좌표를 씁니다(CSS로 뒤집지 않음) */
.art-in img, .art-in svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art svg g { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .l-faint { stroke: rgba(120, 72, 52, 0.45); stroke-width: 8; }
.art .l-soft { stroke: rgba(255, 236, 190, 0.85); stroke-width: 8; filter: drop-shadow(0 0 4px rgba(255, 196, 80, 0.6)); }
.art .l-gold { stroke: #fff1c9; stroke-width: 12; filter: drop-shadow(0 0 3px rgba(255, 196, 80, 0.95)) drop-shadow(0 0 10px rgba(255, 190, 70, 0.75)); }
.art .l-pink { stroke: #ffe3f1; stroke-width: 12; filter: drop-shadow(0 0 3px rgba(255, 110, 180, 0.95)) drop-shadow(0 0 10px rgba(255, 110, 180, 0.75)); }
/* 이 장의 선을 가까이 보여 주는 창(SN.handArt opts.lens). 창 둘레는 한지 쪽으로 살짝 바랩니다 */
.art.lens {
  flex: 1 1 0; aspect-ratio: 4 / 3; min-height: 96px; max-height: 250px;
  border-radius: 22px; overflow: hidden; -webkit-mask-image: none; mask-image: none;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px rgba(183, 134, 44, 0.45), var(--shadow);
}
.art.lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 22px 6px rgba(120, 84, 50, 0.22); pointer-events: none; }
.art-z { position: absolute; inset: 0; transform-origin: 0 0; }
/* 선이 그려지는 움직임(.art.draw 안 path는 길이 1로 잼): 쓰는 화면이 animation: draw …를 붙입니다 */
.art.draw .art-in path { stroke-dasharray: 1 1; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes push-in { from { transform: none; } }   /* 창이 손 전체에서 이 장의 선 쪽으로 다가감(.art-z의 확대가 끝 장면) */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}