/* begreen.dev — shared design system
 *
 * 「한 손」 — 파는 페이지와 약관이 같은 손에서 나온 것으로 보이게 한다.
 * 1인 개발자가 돈을 받는 사이트에서 신뢰는 브랜딩이 아니라 **일관성**에서 온다.
 *
 * 밝은 바탕이 기본이고 어두운 바탕은 버리지 않는다. 토큰만 갈아 끼우고
 * 컴포넌트 규칙은 하나다 — 색을 미디어 쿼리 안에서만 정의하면 stamp 없는
 * 기본 상태(시스템 설정 "자동")에서 한쪽 테마의 글자가 다른 쪽 바탕에 얹힌다.
 */
:root{
  /* 배경은 순백이 아니다. 아주 옅은 녹빛 회색을 섞어 "고른 흰색"으로 둔다 —
     순백은 스크린샷과 구매 영역 같은 돌출 표면(--surface)에만 쓴다. */
  --bg:#F7FAF8; --surface:#FFFFFF; --sunk:#EEF4F0;
  --ink:#13251C; --ink-2:#4F6259; --ink-3:#7C8C84;
  --line:#CCD9D1; --line-2:#E3EBE7;

  /* 액센트가 둘인 이유. #3BF0A2는 이 브랜드의 기억점이지만 흰 바탕에서
     본문·버튼으로 쓰면 대비가 1.4:1까지 떨어진다. 그래서 **누르는 것은
     --accent(짙은 녹색), 표시하는 것은 --spark(형광)** 으로 갈랐다.
     형광을 지우면 다크 사이트와 같은 인물로 안 읽히고, 형광을 넓게 쓰면
     식품·친환경 브랜드로 읽힌다. */
  --accent:#087A50; --accent-ink:#FFFFFF; --accent-wash:#E7F3EC;
  --spark:#3BF0A2;

  --disp:"Archivo","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --serif:"Fraunces","Pretendard",ui-serif,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* **순서가 중요하다.** 라틴은 Archivo가, 한글은 Pretendard가 그린다.
     뒤집으면 Pretendard의 라틴(Inter 계열)이 Archivo를 밀어내 제목 얼굴이 바뀐다.
     Pretendard 부분집합에는 한글과 「」→ 셋뿐이라 라틴은 애초에 없다. */
  --sans:"Archivo","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;

  /* 스크린샷을 얹는 판. 배경보다 한 단계 짙어 화면이 떠 보인다. */
  --mat:#E3EAE5;
  --radius-control:6px;   /* 누를 수 있는 것 */
  --radius-frame:10px;    /* 앱 화면 프레임 */
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#09100D; --surface:#17231D; --sunk:#101A15;
    --ink:#E7F1EB; --ink-2:#9AAEA3; --ink-3:#74857C;
    --line:#2D4036; --line-2:#1B2822;
    --accent:#3BF0A2; --accent-ink:#09100D; --accent-wash:#132A20;
    --spark:#3BF0A2;
  --mat:#0E1714;
  }
}
:root[data-theme="dark"]{
  --bg:#09100D; --surface:#17231D; --sunk:#101A15;
  --ink:#E7F1EB; --ink-2:#9AAEA3; --ink-3:#74857C;
  --line:#2D4036; --line-2:#1B2822;
  --accent:#3BF0A2; --accent-ink:#09100D; --accent-wash:#132A20;
  --spark:#3BF0A2;
  --mat:#0E1714;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;
  /* 한글은 어절이 아니라 음절에서 꺾이는 것이 기본값이다. 좁은 표·URL·
     사업자번호에는 예외를 두되(아래 .biz), 본문은 어절을 지킨다. */
  word-break:keep-all;overflow-wrap:break-word}

/* ── the horizon: 밝은 데로 옮긴 지평선 ───────────────────────────────────
   다크에서 이 사이트의 서명은 행성 테두리의 녹색 빛이었다. 흰 바탕에서
   같은 세기로 두면 형광이 넓은 면적을 차지해 식품 브랜드로 읽히므로,
   **아주 옅은 띠 하나**로 줄여 브랜드의 기억만 남긴다. */
.cosmos{position:absolute;inset:0 0 auto;height:520px;pointer-events:none;overflow:hidden;z-index:0}
.cosmos::before{content:"";position:absolute;left:50%;top:-460px;transform:translateX(-50%);
  width:190vw;height:720px;border-radius:50%;
  background:radial-gradient(50% 62% at 50% 100%,
    var(--accent-wash) 0%, var(--accent-wash) 26%,
    color-mix(in srgb,var(--accent-wash) 55%,transparent) 52%,
    color-mix(in srgb,var(--accent-wash) 18%,transparent) 74%, transparent 92%)}
.cosmos.quiet{height:360px}
@media (prefers-reduced-motion: reduce){.cosmos{animation:none}}

.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 28px}

.skip{position:absolute;left:0;top:-4em;z-index:9;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;text-decoration:none;border-radius:0 0 var(--radius-control) 0}
.skip:focus{top:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pending{font-family:var(--mono);font-size:.9em;color:var(--ink-3);
  border-bottom:1px dashed var(--line)}

/* ── header ─────────────────────────────────────────────────────────────── */
header{padding:22px 0;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--disp);font-size:17.5px;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.logo::before{content:"";width:15px;height:15px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%,var(--spark),var(--accent) 74%)}

nav{display:flex;align-items:center;gap:2px}
nav>a,.menu>a{color:var(--ink-2);text-decoration:none;font-size:14.5px;
  padding:9px 12px;border-radius:var(--radius-control)}
nav>a:hover,.menu>a:hover{color:var(--accent);background:var(--accent-wash)}

.menu{position:relative}
.menu>a::after{content:" ▾";font-size:10px;color:var(--ink-3)}
.dropdown{position:absolute;top:calc(100% + 6px);left:6px;min-width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);
  padding:6px;visibility:hidden;opacity:0;transition:opacity .12s;z-index:5;
  box-shadow:0 12px 30px rgba(19,37,28,.09)}
.menu:hover .dropdown,.menu:focus-within .dropdown{visibility:visible;opacity:1}
.dropdown a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:9px 11px;color:var(--ink-2);text-decoration:none;font-size:14px;
  border-radius:4px}
.dropdown a:hover{background:var(--accent-wash);color:var(--accent)}
.dropdown .st{font-size:12px;color:var(--ink-3)}

/* 언어 전환은 메뉴 항목이 아니라 도구라 한 단계 낮춘다. */
nav .lang{font-size:12px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--radius-control);padding:3px 9px;text-decoration:none;margin-left:6px}
nav .lang:hover{color:var(--accent);border-color:var(--accent);background:transparent}

/* ── shared atoms ───────────────────────────────────────────────────────── */
.cta{display:inline-block;color:var(--accent-ink);background:var(--accent);text-decoration:none;
  font-weight:600;font-size:15px;padding:12px 24px;border-radius:var(--radius-control);
  border:1px solid var(--accent)}
.cta:hover{filter:brightness(1.08)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.cta.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
/* 구역 표시는 대문자·자간이 아니라 굵기와 색으로 만든다 — uppercase와
   letter-spacing은 라틴 소문자용 장치라 한글에 걸면 낱자가 흩어진다. */
.sec{font-size:12.5px;font-weight:650;color:var(--ink-3);margin:0 0 16px}
.meta{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* 법정 표시사항은 푸터라고 줄이지 않는다. 읽으라고 두는 문서와 안 읽히려고
   두는 문서는 조판에서 갈린다 — 본문보다 한 단계만 낮춘다. */
footer{border-top:1px solid var(--line);padding:30px 0 44px;margin-top:70px;
  font-size:14px;color:var(--ink-2);line-height:1.8}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--accent)}

/* ── home: hero ─────────────────────────────────────────────────────────── */
/* 가운데 정렬하지 않는다. 텍스트와 컨트롤을 왼쪽 기준선에 맞추면 눈이
   한 줄마다 되돌아오지 않는다 — 한글 본문에서 특히 크게 벌어진다. */
.hero{padding:86px 0 56px}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5.6vw,62px);
  line-height:1.1;letter-spacing:-.028em;margin:0 0 20px;max-width:18ch;text-wrap:balance}
h1 .dim{color:var(--ink-2)}
h1 .glow{color:var(--accent)}
.hero p{font-size:18px;color:var(--ink-2);max-width:52ch;margin:0 0 30px}
.dust{display:none}

/* ── home: services showcase ────────────────────────────────────────────── */
.services{padding:26px 0 40px}
.featured{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-frame);
  padding:34px 36px;text-decoration:none;color:inherit;margin-bottom:20px}
.featured:hover{border-color:var(--accent)}
.featured h2{font-family:var(--disp);font-size:28px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 12px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.featured h2 img{width:28px;height:28px}
.featured p{color:var(--ink-2);font-size:15.5px;max-width:44ch;margin:0 0 16px}
.featured .go{font-size:14px;font-weight:600;color:var(--accent)}
.featured img.shot{width:100%;max-height:300px;object-fit:cover;object-position:top;
  border-radius:var(--radius-frame);border:1px solid var(--line);display:block}

/* 카드는 홈의 제품 비교에만 쓴다. 기능마다 카드를 만들면 전부 같은 무게가 된다. */
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:0}
.card{display:block;border:1px solid var(--line);border-radius:var(--radius-frame);
  padding:26px 28px;background:var(--surface);text-decoration:none;color:inherit}
.card:hover{border-color:var(--accent)}
.card h3{font-family:var(--disp);font-size:20px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.card p{font-size:15px;color:var(--ink-2);margin:0 0 14px}
.card .st,.featured .st{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.manifesto{padding:64px 0 20px}
.manifesto p{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.6vw,28px);
  color:var(--ink-2);max-width:36ch;line-height:1.5;margin:0}
.manifesto em{color:var(--accent);font-style:italic}

/* ── service page ───────────────────────────────────────────────────────── */
/* 히어로는 7:5 분할이다 — 왼쪽에 제품 정의·가격·버튼, 오른쪽에 실제 화면.
   추상 장식은 두지 않는다. 살 사람이 첫 화면에서 봐야 하는 것은 제품이다. */
.p-hero{padding:64px 0 30px}
.p-hero .app-icon{width:56px;height:56px;margin-bottom:18px}
.p-hero h1{font-size:clamp(36px,4.6vw,52px);max-width:15ch}
.p-hero .tag{font-size:18px;color:var(--ink-2);max-width:50ch;margin:0 0 26px}
/* 체험 안내 한 줄 — 부제 아래, 버튼 위. 사실 하나를 적는 자리라 색·굵기를 더하지 않는다. */
.p-hero .trial{font-size:15px;color:var(--ink-2);max-width:50ch;margin:-12px 0 26px}
/* 히어로 바로 아래의 큰 화면이 첫 논거다. */
.p-body>.p-shot:first-child{margin-top:6px}

.p-body{max-width:820px;padding:14px 0 40px}
/* 스크린샷 매트. 라이트 화면은 흰 바탕에 그냥 놓으면 녹는다(명도차 9). 더 짙은
   판 위에 여백을 주고 얹어야 하나의 제품 화면으로 읽힌다. 매트가 커지면 화면보다
   매트가 먼저 보이므로 여백은 최소로 두고, 색은 --sunk 보다 한 단계만 짙게 쓴다. */
.mat{margin:30px 0;padding:22px;border-radius:calc(var(--radius-frame) + 6px);
  background:var(--mat);border:1px solid var(--line-2)}
.mat>img,.mat>.p-shot{margin:0;box-shadow:0 4px 16px rgba(19,37,28,.13)}
.mat figcaption{font-size:14px;color:var(--ink-3);margin:12px 2px 0}
.p-shot{width:100%;border-radius:var(--radius-frame);border:1px solid var(--line);
  display:block;margin:30px 0}

/* 기능은 아이콘 카드가 아니라 macOS 설정 화면 같은 2열 목록이다 —
   왼쪽에 이름, 오른쪽에 설명. 훑을 때 이름만 읽고 지나갈 수 있다. */
.features{list-style:none;padding:0;margin:36px 0}
.features li{font-size:15.5px;color:var(--ink-2);padding:14px 0;
  border-top:1px solid var(--line-2)}
.features li::before{content:none}
.views{display:grid;gap:0;grid-template-columns:1fr;margin:0 0 44px}
.views div{display:grid;grid-template-columns:180px 1fr;gap:22px;
  border-top:1px solid var(--line-2);padding:14px 0;min-width:0}
.views b{font-size:15.5px;color:var(--ink);font-weight:650}
.views span{font-size:15px;color:var(--ink-2);line-height:1.65;min-width:0}

/* 가격·기기 수·최소 OS·결제 방식을 한 줄 사양표로. 설득하지 않고 적어 둔다. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 0}
.facts div{padding:12px 16px 12px 0;border-right:1px solid var(--line-2)}
.facts div:last-child{border-right:0}
.facts .k{display:block;font-size:12px;color:var(--ink-3);margin-bottom:3px}
.facts .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

.wip-note{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,26px);
  color:var(--ink);max-width:32ch;margin:52px 0;line-height:1.5}
.wip-note em{color:var(--accent);font-style:italic}

.install{margin-top:56px;border-top:1px solid var(--line);padding-top:30px}
.install .sec{margin-bottom:14px}
.install .meta{margin:0 0 10px;font-size:14.5px}
.install .note{font-size:14px;color:var(--ink-3);max-width:52ch;margin:18px 0 0;line-height:1.75}
.install .note em{color:var(--ink-2);font-style:normal}
.install a{color:var(--accent)}

.shotpair{margin:0 0 44px}
.shotpair img{width:100%;display:block;border-radius:var(--radius-frame);border:1px solid var(--line)}
.shotpair figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}

/* Intel 링크는 기본 버튼 아래 한 단계 낮은 자리. */
.archnote{font-size:13.5px;color:var(--ink-3);margin:14px 0 0}
.archnote a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.archnote a:hover{color:var(--accent)}

@media (max-width:900px){
  .p-hero{grid-template-columns:1fr;gap:30px;padding-top:48px}
  .featured{grid-template-columns:1fr;gap:26px}
  .row{grid-template-columns:1fr}
  .views div{grid-template-columns:1fr;gap:4px}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .dropdown{left:auto;right:0;min-width:0;width:min(250px,calc(100vw - 56px))}
  nav>a,.menu>a{padding:9px 9px}
  .wrap{padding:0 20px}
}