/* Plainloop Studio — shared design tokens & base chrome */
:root{
  --ink:#0F1B2D;
  --coral:#FF6B5A;
  --warm:#B8B2A6;
  --paper:#F7F5F1;
  --white:#FCFBF8;
  --sand:#F0EDE7;
  --stone:#EAE5DD;
  --muted:#6F6A61;
  --body:#515865;
  --line:rgba(15,27,45,.13);
  --max:1180px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}

/* header */
header{position:sticky;top:0;z-index:10;background:rgba(247,245,241,.9);backdrop-filter:blur(18px)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:760;letter-spacing:-.03em}
.brand img{width:30px;height:30px;object-fit:contain}
.navlinks{display:flex;gap:28px;font-size:13px;align-items:center}
.navlinks a{opacity:.72}.navlinks a:hover{opacity:1}
.navlinks a.on{opacity:1;font-weight:700}
.menu{display:none;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;padding:6px 2px}
.scrim{position:fixed;inset:0;z-index:8;background:rgba(15,27,45,.28);opacity:0;pointer-events:none;transition:opacity .22s ease}
body.nav-open .scrim{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}

/* type */
h1,h2,h3{margin:0}
.eyebrow,.label{color:var(--coral);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
section{border-top:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:52px}
.section-head h2{margin:12px 0 0;font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-.055em}
.smallnote{padding-bottom:7px;color:var(--muted);font-size:13px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:999px;font-size:14px;font-weight:740;letter-spacing:-.02em;border:1px solid transparent;transition:transform .15s ease,opacity .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--coral);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn[aria-disabled="true"]{background:var(--stone);color:var(--muted);cursor:default;transform:none}
.textlink{display:inline-flex;align-items:center;gap:10px;padding-bottom:5px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:760}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 52px}
.footer{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.footer-brand{font-size:17px;font-weight:760}
.footer-tag{margin-top:7px;color:var(--muted);font-size:12px}
.footer-links{display:flex;gap:18px;margin-top:16px;font-size:12px;color:var(--muted)}
.footer-links a:hover{color:var(--ink)}
.footer-meta{text-align:right;color:var(--muted);font-size:11px;line-height:1.75}

@media(max-width:680px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .nav{height:70px}.menu{display:block}
  .navlinks{display:flex;position:absolute;top:70px;left:14px;right:14px;flex-direction:column;gap:0;align-items:stretch;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 18px 40px rgba(15,27,45,.12);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.99);transform-origin:top center;transition:opacity .2s ease,transform .22s cubic-bezier(.16,.84,.44,1),visibility .22s}
  .navlinks.open{opacity:1;visibility:visible;transform:none}
  .navlinks a{padding:13px 12px;border-radius:10px}
  .navlinks a:active{background:var(--sand)}
  @media(prefers-reduced-motion:reduce){.navlinks{transition:none}.scrim{transition:none}}
  .section-head{align-items:flex-start;flex-direction:column;margin-bottom:36px}
  .footer{flex-direction:column;align-items:flex-start}.footer-meta{text-align:left}
}

/* ── legal / document pages ── */
.doc{padding:72px 0 100px}
.doc .wrap{width:min(calc(100% - 48px),820px)}
.doc .kicker{color:var(--coral);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.doc h1{margin:16px 0 0;font-size:clamp(36px,5vw,54px);line-height:1.08;letter-spacing:-.055em;font-weight:780}
.doc .eff{margin:20px 0 0;color:var(--muted);font-size:13px}
.doc .intro{margin:28px 0 0;padding:24px 26px;background:var(--white);border:1px solid var(--line);border-radius:18px;color:var(--body);font-size:15px;line-height:1.85}
.doc h2{margin:56px 0 0;padding-top:26px;border-top:1px solid var(--line);font-size:24px;letter-spacing:-.045em;font-weight:760}
.doc h3{margin:32px 0 0;font-size:17px;letter-spacing:-.035em;font-weight:740}
.doc p{margin:16px 0 0;color:var(--body);font-size:15px;line-height:1.9}
.doc ul,.doc ol{margin:16px 0 0;padding-left:22px;color:var(--body);font-size:15px;line-height:1.9}
.doc li{margin-top:9px}
.doc li strong,.doc p strong{color:var(--ink);font-weight:720}
.doc code{font-family:var(--mono);font-size:13px;background:var(--sand);padding:2px 6px;border-radius:6px;color:var(--ink)}
.doc a{color:var(--coral);border-bottom:1px solid rgba(255,107,90,.45)}
.doc .toc{margin:36px 0 0;padding:22px 26px;background:var(--sand);border-radius:18px}
.doc .toc h2{margin:0;padding:0;border:0;font-size:13px;letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
.doc .toc ol{margin:14px 0 0;font-size:14px}
.doc .backlink{display:inline-flex;align-items:center;gap:8px;margin-top:64px;font-size:14px;font-weight:720}
@media(max-width:680px){.doc{padding:48px 0 76px}.doc .wrap{width:min(calc(100% - 28px),820px)}.doc h2{margin-top:44px}}

/* ── coming soon 상태 배지 ── */
.soon{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 11px;border-radius:999px;
  background:rgba(255,107,90,.10);border:1px solid rgba(255,107,90,.32);color:var(--coral);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.soon:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);animation:soonpulse 2.4s ease-in-out infinite}
@keyframes soonpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@media(prefers-reduced-motion:reduce){.soon:before{animation:none}}
.soon.lg{padding:8px 16px 8px 14px;font-size:12px}
.soon.solid{background:var(--coral);border-color:var(--coral);color:#fff}
.soon.solid:before{background:#fff}