/* 랜딩 다듬기 시안 공통 바탕(2026-10-15). 세 시안(a_marble, b_pip, c_blend)이 함께 읽는다.
   지키는 것(Y 13:28, 13:36, 13:38): 기존 디자인 자산을 부수지 않는다. 폴리곤(각진 면) 정체성, 투칸, 두더지를 살린다.
   그래서 색, 글꼴, 머리글, 나무 버튼은 라이브 랜딩(3_Engineering/30_Development/landing/index.html)의 값을 그대로 옮겼다.
   자산은 서버가 /L/ 로 라이브 랜딩 assets 폴더를 읽기 전용으로 내준다(serve.py). */

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-var.woff2") format("woff2");
  font-style: normal; font-weight: 100 900; font-display: block;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-var.woff2") format("woff2");
  font-style: normal; font-weight: 100 900; font-display: optional;
}

:root {
  /* 라이브 랜딩 :root 그대로 */
  --sky: #d9e7d2;            /* 하늘 연초록 */
  --ground-fill: #5c4030;    /* 땅 갈색 */
  --soil: #d9c4a8;           /* 땅속 연갈색 */
  --text: #183525;
  --muted: rgba(24, 53, 37, .72);
  --faint: rgba(24, 53, 37, .45);
  --accent: #2f6b46;
  --accent-strong: #47a66c;
  --leaf-word: #4fa86d;      /* Welcome to Thinket. 의 Thinket. 색 */
  --card: rgba(255, 255, 255, .72);
  --line: rgba(24, 53, 37, .16);
  --wood: #6b4a2e;           /* 팻말, 나무 버튼 */
  /* 폴리곤 잎 네 톤(휴대폰 화면 나무 왕관 그대로) */
  --leaf-1: #2f6b46; --leaf-2: #3d8256; --leaf-3: #57b07c; --leaf-4: #8fcaa3;
  /* 브랜드 '숲의 낮' 종이(09-03 확정, 앱 style.css :root) */
  --paper: #f5f2ec; --paper-hi: #fdfcf9; --paper-lo: #f0ece5;
  --brand: #1e6e43;
  --highlight: #fbe58a;      /* 형광펜 노랑 */
  --nav-h: 58px;
  --font: "Jost", "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  color-scheme: light;
}

/* 어두운 판(2026-10-15 20:08 Y "다크까지 반영해봐. 세 시안 전부"). 축 = html[data-theme="dark"], 저장 키 fs_theme(라이브, 앱과 같다).
   값은 라이브 랜딩 index.html html[data-theme="dark"] 그대로: 짙은 초록 바탕, 더 어두운 땅, 밝힌 초록 강조. 브랜드 초록과 형광펜은 반전하지 않고 밝기만 올린다.
   부트(첫 페인트 전)는 각 index.html <head> 인라인 한 줄, 버튼은 라이브 /L/theme.js 가 맡는다. */
html[data-theme="dark"] {
  --sky: #14231a; --ground-fill: #1b100a; --soil: #2e2119;
  --text: #dfeee3; --muted: #a9bfb0; --faint: rgba(223, 238, 227, .45);
  --accent: #8fd3a8; --accent-strong: #57b07c; --leaf-word: #57b07c;
  --card: rgba(20, 35, 26, .92); --line: rgba(223, 238, 227, .16);
  --paper: #121a15; --paper-hi: #18211b; --paper-lo: #0f1612;
  --brand: #8fd3a8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* ── 머리글: 라이브 .top 과 같은 꼴(흰 바, 로고, 링크 아래 초록 삼각형, 나무 CTA) ── */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 18px;
  color: #151613;
  border-bottom: 1px solid #e1ddd5;
  background: #fff;
}
.brand { display: inline-flex; align-items: center; font-size: 21px; text-decoration: none; color: inherit; }
.brand img { height: .847em; width: auto; }
.brand .logo-dark { display: none; }
html[data-theme="dark"] .brand .logo-light { display: none; }
html[data-theme="dark"] .brand .logo-dark { display: block; }
.page-nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 24px); }
.page-nav a { position: relative; color: #686a63; font-size: 13px; font-weight: 650; text-decoration: none; }
.page-nav a:hover { color: #151613; }
.page-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 9px; height: 7px;
  background: var(--leaf-word); clip-path: polygon(50% 0, 0 100%, 100% 100%);
  opacity: 0; transform: translate(-50%, 5px) scale(.4);
  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease; pointer-events: none;
}
.page-nav a:not(.nav-cta):hover::after, .page-nav a:not(.nav-cta):focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
.nav-cta, .wood-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px 12px 5px 12px;
  background: var(--wood) url("../cta-wood-plank-06.svg") center / 100% 100% no-repeat;
  color: #fff !important; font-weight: 720; text-decoration: none; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.page-nav a.nav-cta { padding: 6px 12px; font-size: 12px; }
.wood-btn { padding: 12px 20px; font-size: 15px; }
.nav-cta:hover, .wood-btn:hover { filter: brightness(1.08); }
.wood-btn:active { transform: translateY(1px); }
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; font-size: 15px; font-weight: 700; text-decoration: none;
  border-radius: 12px 12px 5px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--text);
}
@media (max-width: 560px) {
  .page-nav .opt { display: none; }      /* 좁은 화면: 둘러보기 링크는 숨기고 CTA만 */
}
/* 테마 전환 버튼(라이브 theme.css .theme-toggle 그대로: 해, 달 아이콘) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #686a63; cursor: pointer; line-height: 0; transition: color .15s ease; }
.theme-toggle:hover { color: #151613; }
.theme-toggle { width: 22px; height: 22px; flex: none; }
.theme-toggle svg { width: 15px; height: 15px; max-width: none; flex: none; }   /* 바탕 규칙 svg{max-width:100%} 가 버튼 폭을 0으로 접는다 */
/* 아이콘 클래스(sun, moon)가 시안 첫 화면의 해, 달 그림 규칙(.sun 절대 위치, 큰 폭)에 걸리지 않게 머리글 안에서는 되돌린다 */
.top .theme-toggle svg.sun, .top .theme-toggle svg.moon { position: static; inset: auto; width: 15px; height: 15px; transform: none; margin: 0; z-index: auto; filter: none; animation: none; }
.theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: inline; }
/* 어두운 머리글(라이브 index.html 그대로) */
html[data-theme="dark"] .top { background: #161916; color: #eceee6; border-bottom-color: #2e332c; }
html[data-theme="dark"] .page-nav a:not(.nav-cta), html[data-theme="dark"] .theme-toggle { color: #a9ada2; }
html[data-theme="dark"] .page-nav a:not(.nav-cta):hover, html[data-theme="dark"] .theme-toggle:hover { color: #eceee6; }
html[data-theme="dark"] .ghost-btn { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .mock-tag { background: rgba(143, 211, 168, .2); color: #dfeee3; }

/* 폴리곤 잎 표식(라이브 휴대폰 화면의 연한 잎 삼각형) */
.leaf-tri { display: inline-block; width: 11px; height: 10px; background: var(--leaf-4); clip-path: polygon(50% 0, 0 100%, 100% 100%); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 시안 표지: 화면 구석의 작은 꼬리표(이 페이지가 시안임을 표시, 라이브에는 없다) */
.mock-tag {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  padding: 5px 9px; border-radius: 8px; background: rgba(24,53,37,.82); color: #fff;
  font: 600 11px/1.2 var(--font); letter-spacing: .02em; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}