/* AIDE — 공용 스타일
   디자인 확정: 딥 파인그린 액센트 + 살짝 그린 편향 뉴트럴 + 시스템 폰트만.
   색·폰트·광원을 바꾸려면 여기만 고치면 6개 페이지에 전부 반영된다. */

:root{
  --ground:#EFF0EC; --surface:#FAFBF7; --ink:#191C19; --muted:#5B615B;
  --line:#DCDED7; --accent:#14664B; --accent-2:#1C8A63; --lamp:255,250,235;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Cascadia Code",Consolas,monospace;
  --maxw:940px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0F120F; --surface:#161A16; --ink:#ECEFE8; --muted:#98A098;
    --line:#242B24; --accent:#3AA57C; --accent-2:#54C193; --lamp:120,200,160;
  }
}
:root[data-theme="light"]{
  --ground:#EFF0EC; --surface:#FAFBF7; --ink:#191C19; --muted:#5B615B;
  --line:#DCDED7; --accent:#14664B; --accent-2:#1C8A63; --lamp:255,250,235;
}
:root[data-theme="dark"]{
  --ground:#0F120F; --surface:#161A16; --ink:#ECEFE8; --muted:#98A098;
  --line:#242B24; --accent:#3AA57C; --accent-2:#54C193; --lamp:120,200,160;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); line-height:1.65; font-size:17px; letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin:0 0 18px}
a{color:inherit}

/* ── 헤더 ───────────────────────────────────────── */
header{position:relative; z-index:2}
/* padding 단축 속성을 쓰면 같은 요소의 .wrap 좌우 패딩(0 28px)까지 덮어써서
   996px 미만에서 헤더가 화면 가장자리에 붙는다 — 세로만 longhand로 지정 */
.bar{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-top:26px; padding-bottom:26px}
.mark{font-size:1.12rem; font-weight:680; letter-spacing:.02em; text-decoration:none}
.mark b{color:var(--accent)}
.bnav{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; font-family:var(--mono); font-size:.78rem}
.bar .to{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.bar .to:hover{color:var(--accent); border-color:var(--accent)}

/* 언어 토글 — 현재 언어는 링크가 아니라 상태 */
.lang{display:inline-flex; align-items:baseline; gap:7px; color:var(--muted); white-space:nowrap}
.lang .sep{opacity:.45}
.lang a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.lang a:hover{color:var(--accent); border-color:var(--accent)}
.lang [aria-current="true"]{color:var(--ink); font-weight:600}

/* ── 히어로 (홈 전용) ────────────────────────────── */
.hero{position:relative; padding:96px 0 84px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-40% 0 auto 0; height:150%;
  background:radial-gradient(60% 55% at 50% 0%, rgba(var(--lamp),.55), rgba(var(--lamp),0) 70%);
  pointer-events:none; z-index:0}
.hero .wrap{position:relative; z-index:1}
h1{font-size:clamp(2.5rem,6.2vw,4.3rem); line-height:1.04; font-weight:700; letter-spacing:-0.028em; margin:0 0 26px; text-wrap:balance; max-width:16ch}
.lede{font-size:clamp(1.05rem,2vw,1.28rem); color:var(--muted); max-width:52ch; margin:0}
.lede b{color:var(--ink); font-weight:600}

section{padding:64px 0}
.shead{display:flex; align-items:baseline; gap:16px; margin-bottom:34px; border-top:1px solid var(--line); padding-top:28px}
.shead h2{font-size:clamp(1.3rem,3vw,1.7rem); font-weight:660; letter-spacing:-0.02em; margin:0}
.shead .ct{margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.06em}

/* ── 앱 카드 ────────────────────────────────────── */
.apps{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px 24px 20px; display:flex; flex-direction:column; gap:12px; min-height:172px; transition:border-color .25s, transform .25s}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card.feat{grid-column:1 / -1}
.card .an{font-size:1.24rem; font-weight:680; letter-spacing:-0.01em; margin:0}
.card .ad{color:var(--muted); margin:0; font-size:1rem; flex:1}
.card.feat .ad{max-width:46ch}
.meta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted); padding-top:6px; border-top:1px solid var(--line)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.08em}
.pill.soon{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.pill.soon::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.plat{margin-left:auto}

.prose p{max-width:60ch; font-size:1.08rem; margin:0 0 18px}
.prose p:last-child{margin-bottom:0}
.prose .accentline{color:var(--accent); font-weight:600}

/* ── 문의 ───────────────────────────────────────── */
.contact .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:24px; justify-content:space-between}
.contact h2{font-size:clamp(1.4rem,3.4vw,2rem); font-weight:680; letter-spacing:-0.02em; margin:0; max-width:18ch; text-wrap:balance}
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.86rem; padding:14px 22px; border-radius:12px; background:var(--accent); color:#fff; text-decoration:none; letter-spacing:.02em; transition:background .2s, transform .2s; white-space:nowrap}
@media (prefers-color-scheme:dark){.btn{color:#0F120F}}
:root[data-theme="light"] .btn{color:#fff}
:root[data-theme="dark"] .btn{color:#0F120F}
.btn:hover{background:var(--accent-2); transform:translateY(-2px)}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}

/* ── 문서 페이지 (privacy · support) ─────────────── */
.doc{padding:72px 0 24px}
.doc h1{font-size:clamp(1.9rem,4.4vw,2.6rem); margin:0 0 14px; max-width:24ch}
.doc .updated{font-family:var(--mono); font-size:.74rem; color:var(--muted); letter-spacing:.04em; margin:0}
.doc .summary{margin:28px 0 0; padding:20px 22px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; font-size:1.08rem; max-width:62ch}
.doc .summary b{color:var(--accent)}

.body{padding:16px 0 64px}
.body h2{font-size:1.22rem; font-weight:660; letter-spacing:-0.015em; margin:44px 0 14px; padding-top:26px; border-top:1px solid var(--line)}
.body h2:first-child{border-top:0; padding-top:0; margin-top:24px}
.body h3{font-size:1rem; font-weight:660; margin:26px 0 8px}
.body h3 .tag{font-family:var(--mono); font-size:.68rem; font-weight:400; color:var(--muted); letter-spacing:.06em; margin-left:8px; text-transform:uppercase}
.body p{max-width:64ch; margin:0 0 14px; color:var(--muted)}
.body p strong,.body li strong{color:var(--ink); font-weight:600}
.body ul{max-width:64ch; margin:0 0 14px; padding-left:20px; color:var(--muted)}
.body li{margin:0 0 7px}
.body a{color:var(--accent); text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent); text-underline-offset:3px}

/* ── 푸터 ───────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:44px 0 52px; margin-top:24px}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px}
.fcol .fh{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin:0 0 14px}
.fname{font-size:1.02rem; font-weight:680; letter-spacing:.02em; margin:0 0 8px}
.fcol p{margin:0 0 6px; font-size:.9rem; color:var(--muted)}
.fcol ul{list-style:none; margin:0; padding:0}
.fcol li{margin:0 0 8px; font-size:.9rem; color:var(--muted)}
.fcol a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.fcol a:hover{color:var(--accent); border-color:var(--accent)}
.fbot{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;
  margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.04em}

/* ── 모션 · 포커스 ──────────────────────────────── */
.rise{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.rise.in{opacity:1; transform:none}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; transition:none}
  .card,.btn,.bar .to,.fcol a,.lang a{transition:none}
  .card:hover,.btn:hover{transform:none}
}
@media (max-width:640px){
  .apps{grid-template-columns:1fr}
  .hero{padding:72px 0 60px}
  section{padding:52px 0}
  .contact .wrap{gap:20px}
  .fgrid{grid-template-columns:1fr; gap:28px}
  .bar{flex-wrap:wrap; gap:10px}
  .bnav{gap:6px 14px}
  /* 이메일은 끊기지 않는 긴 토큰이라 좁은 화면에서 가로 넘침을 만든다 */
  .bar .to{word-break:break-all}
}