/* whendesk.app — 사이트 공통 스타일.
   색은 WHENWORK 앱의 renderer/tokens.css(브랜드 "안개 + 라임", docs/08_브랜드.md)와 같은 값이다.
   라이트에서 라임은 면으로만 쓰고 글자·테두리는 올리브. OS 테마를 따른다. */
:root {
  color-scheme: light;
  --bg: #e8ecf0;
  --raised: #f7f9fa;
  --inset: #dde3e9;
  --line: #d0d8e0;
  --line-strong: #b4beca;
  --ink: #151a21;
  --soft: #3f4752;
  --muted: #4f5865;
  --accent: #476000;
  --lime: #c6ee3a;
  --on-lime: #1a2200;
  --lime-dim: color-mix(in srgb, var(--lime) 32%, transparent);
  --frame: #151a21;          /* 앱 아이콘 틀 — 테마와 상관없이 같다 */
  --frame-ink: #e8ecf0;
  --shadow: 0 18px 50px rgba(20, 30, 45, .14), 0 2px 8px rgba(20, 30, 45, .08);

  --font: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: "Cascadia Code", "D2Coding", ui-monospace, Consolas, monospace;
  --wrap: 1080px;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #12161c;
    --raised: #1a1f27;
    --inset: #0e1116;
    --line: #29303a;
    --line-strong: #3e4753;
    --ink: #e4e9ef;
    --soft: #b8c1cc;
    --muted: #98a2af;
    --accent: #c6ee3a;
    --lime-dim: color-mix(in srgb, var(--lime) 14%, transparent);
    --shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 750; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0; }
.lead { font-size: clamp(17px, 2vw, 19px); color: var(--soft); max-width: 40em; }
.eyebrow { font: 650 14px var(--font); letter-spacing: .02em; color: var(--accent); }
mark { background: linear-gradient(transparent 58%, var(--lime-dim) 58%); color: inherit; padding: 0 .1em; }
kbd {
  font: 500 .82em var(--mono); background: var(--raised); border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 6px; padding: .05em .45em; white-space: nowrap;
}

/* ── 머리띠 */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 22px; min-height: 60px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--ink); text-decoration: none; letter-spacing: .06em; }
.logo .mark { width: 26px; height: 26px; flex: none; }
/* 앱 아이콘의 먹색 틀은 다크 바탕에 묻힌다 — 다크에서만 얇은 테두리로 윤곽을 준다 */
.appicon { border-radius: 24%; }
@media (prefers-color-scheme: dark) { .appicon { box-shadow: 0 0 0 1px var(--line-strong); } }
.logo em { font-style: normal; color: var(--accent); }
.top nav { display: flex; gap: 18px; margin-left: auto; font-size: 15px; flex-wrap: wrap; }
.top nav a { color: var(--soft); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

/* ── 버튼 */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: 650 16px var(--font); padding: 13px 20px; border-radius: 12px; border: 0;
  background: var(--lime); color: var(--on-lime);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-lime) 18%, transparent);
}
.btn:hover { filter: brightness(1.04); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn small { font: 500 12.5px var(--mono); opacity: .75; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ── 구역 */
section { padding-block: clamp(48px, 8vw, 88px); }
section + section { border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 10px; margin-bottom: 32px; max-width: 44em; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 8px; align-content: start; }
.card p { color: var(--soft); font-size: 15px; }

/* ── 바닥 */
.foot { border-top: 1px solid var(--line); padding-block: 36px 48px; font-size: 14px; color: var(--muted); }
.foot .wrap { display: grid; gap: 14px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot .links a { color: var(--soft); }
.foot .biz { font-size: 13px; line-height: 1.8; }

/* ── 법률 문서 */
.doc { padding-block: 48px 72px; }
.doc .wrap { max-width: 760px; display: grid; gap: 18px; }
.doc h1 { font-size: clamp(26px, 4vw, 34px); }
.doc h2 { font-size: 20px; margin-top: 18px; }
.doc p, .doc li { color: var(--soft); }
.doc ol, .doc ul { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 650; }
.tablebox { overflow-x: auto; }
.draft { background: var(--lime-dim); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; color: var(--ink); }
.ph { font-family: var(--mono); font-size: .9em; background: var(--inset); padding: 0 .35em; border-radius: 4px; }

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

/* 작은 표식 — "지금", "준비 중", "유료 플랜 시작 후" */
.tag { font: 600 11.5px var(--mono); padding: 2px 8px; border-radius: 99px; background: var(--inset); color: var(--muted); white-space: nowrap; vertical-align: 2px; }
.tag.now { background: var(--lime); color: var(--on-lime); }