/* ONTIC 홈페이지(index) · 로그인(login) 배치 전용. 토큰 · 머리띠 · 버튼 · 표는 ontic-ui(ui/tokens.css · ui/components.css).
   홈페이지는 앱보다 크게 쓴다(본문 16px · 제목 44px). 색 문법은 같다: 후보 = 연필(호박 점선) → 승인 = 잉크(초록 실선). */
body{line-height:1.6}
.site-top{background:color-mix(in srgb,var(--desk) 86%,transparent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s-6)}

/* 첫 화면 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-12);align-items:center;padding:96px 0 104px}
.eyebrow{font:500 var(--t-12) var(--mono);letter-spacing:.06em;color:var(--pencil);margin:0 0 var(--s-5)}
.hero h1{font-size:clamp(2rem,4.2vw,var(--t-48));line-height:1.22;letter-spacing:-.035em;font-weight:600}
.hero h1 em{font-style:normal;color:var(--graphite)}
.lede{font-size:var(--t-16);color:var(--graphite);margin:var(--s-6) 0 var(--s-8);max-width:520px}
.actions{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.fine{font-size:var(--t-12);color:var(--faint);margin-top:var(--s-4)}

/* 서명 장면: 후보 연결(연필)이 대화로 승인되어(잉크) 결정이 남는다 — ledger.js */
.ledger{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-4);padding:var(--s-4) var(--s-4) var(--s-3);box-shadow:var(--lift)}
.ledger-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-12);color:var(--pencil);padding:0 var(--s-1) var(--s-3)}
.ledger-head b{color:var(--ink);font-weight:600}
.legend{display:flex;gap:var(--s-3)}.legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--graphite);vertical-align:middle;margin-right:5px}
.legend .c i{border-top:2px dashed var(--draft)}.legend .a i{position:relative;border-top:2px solid var(--ink)}.legend .a i::after{content:"";position:absolute;left:6px;top:-5px;width:6px;height:6px;border:1.5px solid var(--seal);border-radius:1px;background:var(--paper)}
.ledger svg{display:block;width:100%;height:auto}
.ledger text{font-family:var(--mono)}
.t-box{fill:var(--desk);stroke:var(--rule-2)}.t-rule{stroke:var(--rule-2)}.t-name{font-size:13px;font-weight:600;fill:var(--ink)}.t-col{font-size:11.5px;fill:var(--pencil)}.t-key{fill:var(--ink)}
.t-note{font-size:10.5px;fill:var(--pencil)}
.e-fk{stroke:var(--graphite);stroke-width:1.5;fill:none}
.e-join{fill:none;stroke-width:1.75;stroke:var(--draft);stroke-dasharray:6 4;transition:stroke .5s var(--ease),stroke-width .5s var(--ease),stroke-dasharray .5s var(--ease)}
.chip{transition:opacity .35s var(--ease)}
.chip-c rect{fill:var(--draft-wash);stroke:var(--draft);stroke-dasharray:4 3}.chip-c text{font-size:11px;fill:var(--draft-ink)}
.stamp{pointer-events:none}.stamp-in{opacity:0;transform:scale(1.8) rotate(-4deg);transition:opacity .18s var(--ease) .55s,transform .32s cubic-bezier(.3,1.6,.5,1) .55s}
.stamp rect{fill:var(--paper);stroke:var(--seal);stroke-width:2.5}.stamp text{font:700 13px var(--sans);fill:var(--seal);text-anchor:middle}
.ledger.done .stamp-in{opacity:1;transform:scale(1) rotate(-4deg)}
.decision{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease) .15s,transform .45s var(--ease) .15s}
.decision-card{margin-top:var(--s-3);border-top:1px solid var(--rule);padding:var(--s-3) var(--s-1) 2px;font-size:var(--t-13)}
.decision-card .said{margin:0 0 4px;color:var(--ink)}
.decision-card .by{margin:0;color:var(--pencil);font:400 var(--t-11) var(--mono)}
.decision-card .by{display:flex;align-items:center;gap:6px}.decision-card .by b{color:var(--ink);font-weight:600}
.ledger.done .e-join{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:none}
.ledger.done .chip-c{opacity:0}
.ledger.done .decision{opacity:1;transform:none}

/* 띠 */
section.band{padding:96px 0;border-top:1px solid var(--rule);scroll-margin-top:56px}
section.band.white{background:var(--paper)}
.band h2{font-size:clamp(1.5rem,2.6vw,var(--t-32));letter-spacing:-.03em;line-height:1.3;margin:0 0 var(--s-3)}
.band .sub{color:var(--pencil);max-width:640px;margin:0 0 var(--s-10);font-size:var(--t-16)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;border-top:1px solid var(--ink);padding:0;margin:0}
.steps li{list-style:none;padding:var(--s-5) var(--s-6) 0 0;counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 var(--t-12) var(--mono);color:var(--pencil);display:block;margin-bottom:var(--s-3)}
.steps h3{font-size:var(--t-16);margin:0 0 var(--s-2)}.steps p{color:var(--graphite);font-size:var(--t-14)}

.layers{display:grid;grid-template-columns:1fr 96px 1fr 96px 1fr;align-items:stretch}
.layer{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-3);padding:var(--s-5)}
.layer small{font:500 var(--t-11) var(--mono);color:var(--pencil);letter-spacing:.04em}
.layer h3{margin:6px 0 var(--s-2);font-size:var(--t-16)}.layer p{font-size:var(--t-13);color:var(--graphite)}
.joint{display:flex;align-items:center;justify-content:center;position:relative}
.joint::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:1px solid var(--ink)}
.joint b{position:relative;background:var(--desk);padding:2px 8px;font:600 var(--t-12) var(--mono);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-1)}
.joints{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-6)}
.joints p{font-size:var(--t-14);color:var(--graphite)}.joints b{font-family:var(--mono);color:var(--ink);margin-right:6px}

.trust{width:100%;border-collapse:collapse;font-size:var(--t-14)}
.trust th,.trust td{text-align:left;padding:var(--s-4) var(--s-4) var(--s-4) 0;border-bottom:1px solid var(--rule);vertical-align:top}
.trust thead th{font:500 var(--t-12) var(--sans);color:var(--pencil);border-bottom:1px solid var(--ink)}
.trust td:first-child{font-weight:600;width:22%}
.quote{font-size:var(--t-20);letter-spacing:-.02em;margin:var(--s-8) 0 0;font-weight:600}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-10)}
.points h3{font-size:var(--t-14);margin:0 0 6px}.points p{font-size:var(--t-13);color:var(--graphite)}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-10);margin-top:var(--s-12)}
.fit p{padding:var(--s-4) 0;border-top:1px solid var(--rule);font-size:var(--t-14);color:var(--graphite)}.fit b{display:block;color:var(--ink);margin-bottom:4px;font-weight:600}
.closing h2{font-size:clamp(1.6rem,3vw,var(--t-32))}
.closing p{color:var(--pencil);margin:0 0 var(--s-6);max-width:560px}
.closing .fine{margin:var(--s-4) 0 0}
footer.foot{border-top:1px solid var(--rule);padding:var(--s-6) 0 var(--s-10);font:400 var(--t-12) var(--mono);color:var(--faint)}
footer.foot .wrap{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}

/* 로그인 */
.signin{min-height:calc(100dvh - 56px);display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr)}
.signin-form{padding:80px var(--s-12);background:var(--paper);border-right:1px solid var(--rule)}
.signin-form h1{font-size:var(--t-32);letter-spacing:-.03em;margin:0 0 var(--s-2)}
.signin-form .sub{color:var(--pencil);margin:0 0 var(--s-8);font-size:var(--t-14)}
.providers{display:flex;flex-direction:column;gap:var(--s-2)}
.provider{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:48px;padding:0 var(--s-4);border-radius:var(--r-2);border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--t-14);transition:border-color var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.provider:hover{border-color:var(--ink)}.provider:active{transform:scale(.98)}
.provider small{font:400 var(--t-11) var(--mono);color:var(--pencil);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signin-empty{padding:var(--s-4);border-radius:var(--r-3);background:var(--well);color:var(--graphite);font-size:var(--t-13)}
.signin-error{margin-bottom:var(--s-4)}
.signin-note{margin-top:var(--s-8);font-size:var(--t-13);color:var(--pencil)}
.signin-side{display:flex;align-items:center;justify-content:center;padding:var(--s-12)}
.signin-side .ledger{max-width:560px;width:100%}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:var(--s-10);padding:var(--s-12) 0 64px}
  .steps,.points{grid-template-columns:1fr;gap:var(--s-6)}.steps li{padding-right:0}
  .layers{grid-template-columns:1fr}.joint{height:56px}.joint::before{left:50%;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px solid var(--ink)}
  .joints,.fit{grid-template-columns:1fr}
  .signin{grid-template-columns:1fr}.signin-side{display:none}.signin-form{padding:var(--s-12) var(--s-6);border-right:0}
  section.band{padding:64px 0}
}
@media(max-width:520px){.wrap{padding:0 var(--s-4)}.trust td:first-child{width:auto}}
@media(prefers-reduced-motion:reduce){.e-join,.chip,.decision,.provider,.stamp-in{transition:none}}