/*
  Yutale Studio 공개 사이트 스타일.

  이름의 'Tale(이야기)'에서 출발해 밝은 동화책 느낌으로 만든다. 맨 위는 하늘과 해,
  구름, 초록 언덕 그림으로 열고, 그 아래는 크림색 종이 위에 내용을 올린다.

  - 색: 크림색 바탕, 숲빛 잉크 글자, 로고와 같은 초록을 주색으로 쓰고 하늘색과
    햇살 노랑은 보조로만 쓴다.
  - 테마: 낮(라이트)과 밤(다크) 두 장면. 밤에는 해 대신 초승달과 별이 뜨고 언덕에 반딧불이가
    난다. 어느 쪽을 보여줄지는 assets/theme.js가 <html data-theme>로 정한다(기본은 시스템 설정).
  - 글꼴: 둥근 글꼴. 제목은 Fredoka(한글은 주아), 본문은 Nunito(한글은 고운돋움).
    라틴 글자는 앞 글꼴, 한글은 뒤 글꼴로 자동으로 나뉜다.
  - 주아와 고운돋움은 굵기가 하나뿐이라 브라우저가 가짜 굵게를 만들지 않도록
    굵기 합성을 끈다. 강조가 필요한 짧은 문구는 굵기 대신 제목 글꼴을 쓴다.

  색은 모두 아래 토큰을 거쳐 쓴다. 히어로 그림(assets/scene/)도 <use>로 불러와 같은 토큰으로
  칠한다. 앱 아이콘과 App Store 배지만 이미지 자체의 색을 쓴다.
*/

:root {
  color-scheme: light;

  --bg: #fffcf4;
  --surface: #ffffff;
  --ink: #24382a;
  --ink-soft: #55675a;
  --ink-faint: #66776a;
  --line: rgba(36, 56, 42, 0.1);
  --glass: rgba(255, 255, 255, 0.8);

  --green: #3e9b4a;
  --green-deep: #2c7a37;
  --green-deeper: #24692e;
  --green-soft: #e4f3dc;

  /* 히어로 하늘은 위에서 아래로 하늘색 → 연한 민트 → 연한 연두로 바뀐다. */
  --sky-top: #d9effa;
  --sky-mid: #eaf7f3;
  --sky-low: #f3f9e6;
  --sky-soft: #e3f2fb;
  --sky-deep: #2d6a8e;

  --highlight: #ffe38a;

  --card-shadow: 0 14px 34px -14px rgba(44, 122, 55, 0.22);

  /* 히어로 장면(assets/scene/*.svg) 색. 뒤 언덕일수록 옅다. */
  --sun: #ffd966;
  --moon: #f6e7b0;
  --star: #fff3c4;
  --cloud: #ffffff;
  --cloud-opacity: 1;
  --hill-far: #cdebc0;
  --hill-mid: #a3d88f;
  --hill-near: #7bc36c;
  --canopy: #5fae55;
  --canopy-shine: #7cc46f;
  --trunk: #a07d57;
  --bush: #5fae52;
  --bush-light: #8bcb78;
  --petal-white: #ffffff;
  --petal-pink: #f7bccb;
  --flower-heart: #ffd966;
  --firefly: none;

  --font-display: "Fredoka", "Jua", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-body: "Nunito", "Gowun Dodum", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Segoe UI", sans-serif;

  --shell: 1080px;
  --gutter: 24px;
  --radius: 28px;
}

/* 밤 장면. 같은 토큰 이름에 밤 색을 넣는다. 초록은 어두운 바탕에서 읽히도록 밝게 뒤집어,
   글자·링크는 밝은 초록, 주 버튼은 밝은 초록 바탕에 어두운 글자가 된다. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111915;
  --surface: #19231d;
  --ink: #eef3ea;
  --ink-soft: #b3c1b5;
  --ink-faint: #93a396;
  --line: rgba(238, 243, 234, 0.1);
  --glass: rgba(25, 35, 29, 0.72);

  --green: #7fcf83;
  --green-deep: #8fd88f;
  --green-deeper: #a8e3a5;
  --green-soft: rgba(127, 207, 131, 0.14);

  --sky-top: #132235;
  --sky-mid: #16303a;
  --sky-low: #14261f;
  --sky-soft: rgba(120, 180, 230, 0.16);
  --sky-deep: #a2cff0;

  --highlight: #5e4c1c;

  --card-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55);

  /* 구름은 색을 반투명으로 칠하면 겹친 부분이 진해지므로, 불투명 색에 전체 투명도를 따로 준다. */
  --cloud: #c8dcf5;
  --cloud-opacity: 0.14;
  --hill-far: #2a4a40;
  --hill-mid: #213f30;
  --hill-near: #1a3527;
  --canopy: #2d5a3a;
  --canopy-shine: #3d704c;
  --trunk: #4c3b2b;
  --bush: #234a31;
  --bush-light: #2b5239;
  --petal-white: #c9d6cc;
  --petal-pink: #b58a99;
  --flower-heart: #e2c05e;
  --firefly: #f3e17a;
}

/* 휴대폰 폭에서는 좌우 여백을 16px로 줄인다. */
@media (max-width: 600px) {
  :root { --gutter: 16px; }
}

/* ---------- 기본 ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-synthesis: none;
}

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

/* 한국어는 어절 중간에서 줄이 바뀌면 읽기 어려우므로 어절 단위로 끊는다. */
html:lang(ko) { word-break: keep-all; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; }

a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection { background: var(--highlight); }

.shell {
  width: min(100% - 2 * var(--gutter), var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--surface);
  font-family: var(--font-display);
  text-decoration: none;
  z-index: 10;
}

.skip-link:focus { top: 12px; }

/* 섹션 머리의 작은 이름표. 동화책 책갈피처럼 둥근 알약 모양으로 둔다. */
.kicker {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* 히어로 제목의 강조 구절은 형광펜으로 칠한 것처럼 아랫부분에 햇살색을 깐다. */
.hero h1 em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(transparent 60%, var(--highlight) 60%, var(--highlight) 92%, transparent 92%);
}

/* ---------- 헤더 ---------- */

/* 헤더 바탕은 히어로 하늘의 맨 위 색과 같아서 둘이 한 장면으로 이어진다. */
.site-header {
  padding-block: 20px;
  background: var(--sky-top);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
}

.brand img { width: 36px; height: 36px; }
.brand span { color: var(--ink-soft); font-weight: 500; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}

.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--green-deep); }

.site-nav .lang-switch {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

.site-nav .lang-switch:hover { background: var(--surface); }

/* 테마 버튼. 지금 장면의 반대 그림(낮이면 달, 밤이면 해)을 보여줘 누르면 무엇이 되는지 알린다. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover { background: var(--surface); }

.theme-toggle:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { fill: currentColor; }
.theme-toggle .icon-sun { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .icon-sun circle { fill: currentColor; stroke: none; }
.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

@media (max-width: 720px) {
  .site-nav { gap: 12px; }
  .site-nav .nav-section { display: none; }
}

/* ---------- 히어로: 하늘, 해, 구름, 언덕 ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(28px, 7vw, 84px);
  /* 맨 아래는 페이지 바탕색으로 끝내서, 언덕 그림 아래 경계에 다른 색 줄이 비치지 않게 한다. */
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-low) 80%, var(--bg) 100%);
}

.sky-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 장식의 가로 위치는 본문 폭(shell)의 오른쪽 끝을 기준으로 잡는다. */
.sky-deco > * {
  position: absolute;
  height: auto;
  --edge: max(var(--gutter), (100% - var(--shell)) / 2);
}

.sun,
.moon {
  top: 28px;
  right: var(--edge);
  width: clamp(96px, 11vw, 150px);
}

/* 별은 하늘 전체에 깔린다. */
.sky-deco > .stars { inset: 0; width: 100%; height: 100%; }

/* 낮에는 해, 밤에는 달과 별. */
.moon,
.stars,
:root[data-theme="dark"] .sun { display: none; }
:root[data-theme="dark"] .moon,
:root[data-theme="dark"] .stars { display: block; }

.cloud {
  opacity: var(--cloud-opacity);
  animation: drift 16s ease-in-out infinite alternate;
}

.cloud-a {
  top: 180px;
  right: calc(var(--edge) + 70px);
  width: clamp(130px, 14vw, 200px);
}

.cloud-b {
  top: 64px;
  right: calc(var(--edge) + 230px);
  width: clamp(90px, 9vw, 124px);
  opacity: calc(var(--cloud-opacity) * 0.9);
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
}

/* 본문이 화면을 거의 다 차지하는 폭에서는 해를 모서리로 작게 보내고, 구름 하나가 해를
   살짝 가리게 모아 두어 제목과 겹치지 않게 한다. */
@media (max-width: 960px) {
  .sun,
  .moon { top: 10px; right: 10px; width: 72px; }
  .cloud-a { top: 34px; right: -34px; width: 96px; }
  .cloud-b { display: none; }
}

.hero-copy { position: relative; z-index: 1; }

.hero h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 80px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

html:lang(ko) .hero h1 {
  max-width: none;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 32em;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.button:hover { transform: translateY(-1px); }

.button.primary { background: var(--green-deep); color: var(--surface); }
.button.primary:hover { background: var(--green-deeper); }

.button.ghost {
  background: var(--glass);
  box-shadow: 0 0 0 1px var(--line);
}

.button.ghost:hover { background: var(--surface); }

/* 언덕 그림(assets/scene/meadow.svg). 화면 폭이 바뀌어도 아래쪽 가운데를 기준으로 잘라 내어
   땅이 항상 보이게 한다. 그림의 맨 아래 물결이 페이지 바탕색이라 다음 섹션과 이어진다. */
.meadow {
  display: block;
  width: 100%;
  height: clamp(150px, 21vw, 290px);
  margin-top: clamp(4px, 2vw, 16px);
  object-fit: cover;
  object-position: center bottom;
}


/* 히어로 안의 이름표는 하늘 위에 놓이므로 흰 바탕으로 띄운다. */
.hero .kicker { background: var(--glass); }

/* ---------- 섹션 공통 ---------- */

.section { padding-block: clamp(48px, 8vw, 96px); }

.section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

html:lang(ko) .section h2 { line-height: 1.3; }

.section-head { margin-bottom: 36px; }

/* 소개·연락처처럼 왼쪽에 제목, 오른쪽에 본문을 두는 2단 배치. */
.split {
  display: grid;
  gap: 28px 64px;
}

@media (min-width: 860px) {
  .split { grid-template-columns: 5fr 7fr; }
}

/* ---------- 앱 카드 ---------- */

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 22px;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--card-shadow);
}

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-icon {
  width: 68px;
  height: 68px;
  border-radius: 17px;
  box-shadow: 0 0 0 1px var(--line);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--sky-soft);
  color: var(--sky-deep);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.status.live { background: var(--green-soft); color: var(--green-deep); }

.app-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

.app-pitch {
  margin: 4px 0 0;
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}

.app-desc { margin: 0; color: var(--ink-soft); }

.app-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: auto;
  padding-top: 6px;
}

/* 스토어 배지는 공식 이미지라 높이만 맞추고 가로는 원래 비율을 따른다. */
.store-badge img { width: auto; height: 40px; }

.text-link {
  color: var(--green-deep);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.muted-note { color: var(--ink-faint); font-size: 15px; }

/* Minecraft 사용 가이드라인이 요구하는 비공식 표기. 해당 앱 카드 안에 작게 둔다. */
.app-disclaimer { margin: 0; color: var(--ink-faint); font-size: 13px; line-height: 1.55; }

/* ---------- 소개 ---------- */

/* 이름 풀이를 블록 두 개를 더하는 그림처럼 보여 준다. */
.name-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1;
}

.name-equation .tile {
  padding: 12px 20px;
  border-radius: 18px;
  background: var(--green-soft);
  color: var(--green-deep);
}

.name-equation .tile.sky { background: var(--sky-soft); color: var(--sky-deep); }

.name-equation .op { color: var(--ink-faint); font-weight: 500; }

.prose p { margin: 0 0 18px; color: var(--ink-soft); font-size: 18px; }

/* 'Tale'처럼 이름 풀이에 쓰인 단어는 기울이지 않고 제목 글꼴과 초록으로 짚어 준다. */
.prose em { font-style: normal; color: var(--green-deep); font-family: var(--font-display); }
.prose p:last-child { margin-bottom: 0; }

.prose .prose-lead {
  color: var(--ink);
  font-size: clamp(20px, 2.2vw, 22px);
  line-height: 1.6;
}

/* ---------- 연락처 ---------- */

.contact-list { display: grid; gap: 14px; margin: 0; }

.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

.contact-row dt { color: var(--ink-soft); }
.contact-row dd { margin: 0; }

.contact-row a {
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 500;
  text-decoration: none;
}

.contact-row a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 좁은 화면에서는 주소 길이에 따라 어떤 줄은 한 줄, 어떤 줄은 두 줄이 되지 않도록
   모든 줄을 '이름 위, 주소 아래'로 똑같이 쌓는다. */
@media (max-width: 600px) {
  .contact-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- 푸터 ---------- */

.site-footer {
  padding-block: 36px 52px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 14px;
}

/* 사업자 정보. 한국 사업자 사이트의 관례대로 상호·대표자·사업자등록번호·사업장 주소를 밝혀
   실재하는 사업체임을 보여준다. 통신판매업 신고를 하면 신고번호를 여기에 더한다. */
.business-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 18px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404 ---------- */

/* 404는 히어로 장면을 그대로 쓰고 제목만 조금 작게 한다. */
.not-found { padding-bottom: 8px; }

.not-found h1 { font-size: clamp(36px, 5.5vw, 60px); }

.not-found p:not(.kicker) { margin: 14px 0 0; color: var(--ink-soft); font-size: 18px; }