/* 앱 소개 페이지(index.html) 전용. 처리방침·약관·지원 페이지는 style.css.
   색은 앱(app/lib/ui/theme.dart AppColors·InkColors), 글꼴은 앱과 같은 고운바탕 —
   페이지에 쓴 글자만 남긴 파일이라 글을 고치면 design/store/store.py web 으로 다시 만든다. */
@font-face {
  font-family: "Gowun Batang";
  src: url("/fonts/gowun-batang-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Gowun Batang";
  src: url("/fonts/gowun-batang-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --ink950: #0c0a08;
  --ink900: #14110d;
  --ink850: #1a1611;
  --ink800: #1f1a14;
  --ink700: #2e261c;
  --ink600: #423728;
  --parchment50: #f7f0e1;
  --parchment100: #eadfc8;
  --parchment300: #c9b892;
  --parchment500: #9c8964;
  --gold300: #e8c95a;
  --gold400: #d4af37;
  --gold600: #9a7d1e;
  /* 양피지 위 잉크 (InkColors) */
  --paper-title: #2a1e14;
  --paper-muted: #554230;
  --wrap: 1080px;
  --gutter: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  /* 스토어 그래픽처럼 위쪽 금빛이 계단으로 옅어진다 (store.py background) */
  background:
    linear-gradient(#221b11 0 96px, #1b160f 96px 192px, #15120d 192px 308px, var(--ink950) 308px) no-repeat,
    var(--ink950);
  color: var(--parchment300);
  font: 17px/1.75 "Gowun Batang", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold300); }
:focus-visible { outline: 2px solid var(--gold300); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; color: var(--parchment50); font-weight: 700; line-height: 1.35; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* 픽셀 그림은 도트 그대로 키운다. 크기는 원본의 정수 배 */
.pixel { image-rendering: pixelated; }

/* 버튼 — 앱의 금색 버튼처럼 모서리만 둥글게 */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold400);
  color: var(--ink950);
  box-shadow: inset 0 -3px 0 var(--gold600), 0 8px 28px rgba(212, 175, 55, 0.22);
}
.btn-primary:hover { background: var(--gold300); }
.btn-soon { border: 1px solid var(--ink600); color: var(--parchment500); font-weight: 400; }
.btn-soon b { margin-left: 0.35em; color: var(--parchment300); }

/* 머리 */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(12, 10, 8, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(66, 55, 40, 0.6);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--parchment50); font-size: 18px; font-weight: 700; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.top-cta {
  padding: 6px 14px;
  border: 1px solid var(--gold600);
  border-radius: 8px;
  color: var(--gold300);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.top-cta:hover { background: rgba(212, 175, 55, 0.1); }

/* 휴대폰 틀 (store.py phone 과 같은 잉크 테두리) */
.phone {
  justify-self: center;
  width: 300px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--ink600);
  border-radius: 42px;
  background: var(--ink700);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.phone img { width: 100%; border-radius: 34px; }

/* 첫 화면 */
.hero { padding: 64px 0 96px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
.logo { width: 300px; } /* 50×26 의 6배 */
.headline { margin: 32px 0 10px; color: var(--parchment50); font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; line-height: 1.3; }
.lead { max-width: 25em; margin: 0 0 32px; font-size: clamp(17px, 1.9vw, 20px); }
.note { margin-top: 16px; color: var(--parchment500); font-size: 15px; }

/* 소개 묶음 */
.section { padding: 96px 0; border-top: 1px solid var(--ink800); }
.section-head { max-width: 38em; margin: 0 auto 64px; text-align: center; }
.section-head h2 { color: var(--gold300); font-size: clamp(24px, 3.4vw, 34px); }
.section-head p { margin-top: 16px; font-size: 18px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
.features .feature-row + .feature-row { margin-top: 112px; }
.features .feature-row:nth-child(even) .feature-text { order: 2; }
.feature-text { max-width: 30em; }
.feature-text h3, .card h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: clamp(22px, 2.6vw, 28px); }
.icon { flex: none; width: 32px; height: 32px; } /* 16px 의 2배 */
.feature-text p + p { margin-top: 10px; }

/* 할 일 → 의뢰서 (앱 게시판의 입력 칸과 양피지 의뢰서) */
.demo { display: flex; flex-direction: column; gap: 16px; justify-self: center; width: 100%; max-width: 420px; }
.demo-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ink600);
  border-radius: 10px;
  background: var(--ink900);
  color: var(--parchment100);
  font-size: 18px;
}
.demo-input img { width: 32px; height: 32px; }
.demo-arrow {
  align-self: center;
  width: 0;
  height: 0;
  border-top: 14px solid var(--gold400);
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
}
.paper {
  padding: 24px 24px 18px;
  border-radius: 4px;
  background: var(--parchment100);
  box-shadow: inset 0 0 0 4px var(--parchment100), inset 0 0 0 6px var(--parchment300), 0 18px 44px rgba(0, 0, 0, 0.55);
}
.paper-title { color: var(--paper-title); font-size: 22px; font-weight: 700; line-height: 1.45; }
.paper-src { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(42, 30, 20, 0.25); color: var(--paper-muted); font-size: 15px; }

.cards { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: start; }
.card { padding: 28px; border: 1px solid var(--ink700); border-radius: 14px; background: var(--ink900); }
.card h3 { font-size: 22px; }
.card ul { margin: 0; padding-left: 20px; }
.card li + li { margin-top: 8px; }

/* 마지막 권유 — 세 직업 Lv 99, 스토어 그래픽 이미지처럼 금빛 무대 위에 */
.cta { padding: 96px 0 104px; border-top: 1px solid var(--ink800); text-align: center; }
.cta h2 { color: var(--gold300); font-size: clamp(24px, 3.4vw, 34px); }
.cta .stores { justify-content: center; margin-top: 32px; }
.party { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 0 auto 32px; }
.party::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(520px, 100%);
  height: 230px;
  transform: translateX(-50%);
  background: repeating-conic-gradient(#3a2d14 0 25%, transparent 0 50%) 0 0 / 8px 8px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 100%, #000 0 58%, rgba(0, 0, 0, 0.5) 58% 100%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 100%, #000 0 58%, rgba(0, 0, 0, 0.5) 58% 100%, transparent 100%);
}
.party img { position: relative; }
.party .side { width: 144px; } /* 3배 */
.party .lead-hero { z-index: 1; width: 192px; margin: 0 -10px; } /* 4배 */

/* 꼬리 */
.foot { padding: 40px 0 56px; border-top: 1px solid var(--ink800); color: var(--parchment500); font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.foot nav a { color: var(--parchment300); text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot p + p { margin-top: 4px; }

@media (max-width: 860px) {
  .hero { padding: 40px 0 72px; }
  .hero-grid, .feature-row, .cards { grid-template-columns: 1fr; gap: 40px; }
  .hero-text { text-align: center; }
  .logo { width: 200px; margin: 0 auto; } /* 4배 */
  .lead { margin-right: auto; margin-left: auto; }
  .hero .stores { justify-content: center; }
  .phone { width: 260px; border-radius: 38px; }
  .phone img { border-radius: 30px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .features .feature-row + .feature-row { margin-top: 80px; }
  .features .feature-row:nth-child(even) .feature-text { order: 0; }
  .feature-text { max-width: none; }
  .cta { padding: 72px 0 80px; }
  .party::before { width: min(360px, 100%); height: 160px; }
  .party .side { width: 96px; } /* 2배 */
  .party .lead-hero { width: 144px; margin: 0 -6px; } /* 3배 */
}