/* 디자인 시스템 · 토큰 — 스토리보드 목업 원본 */
/* ===================================================== TOKENS · White 90 / Black point / Lime 아주 조금 (디자이너 확정안) ===================================================== */ :root{--paper:#FFFFFF;--paper-dim:#F7F7F5;--paper-sub:#EFEFEC;
  --ink:#111210;--ink-70:#3E403B;--ink-45:#7C7E78;--ink-25:#BFC1BB;
  --lime:#C6F500;--lime-deep:#95BA00;
  --red:#E5484D;
  --line:#E9E9E5;
  --font-num:'Space Grotesk',ui-sans-serif,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-pill:999px;}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  background:#FAFAF8;color:var(--ink);
  -webkit-font-smoothing:antialiased;letter-spacing:-.012em;
  padding:44px 30px 80px;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
.num{font-family:var(--font-num);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
i.ph,i.ph-fill,i.ph-bold{line-height:1;display:inline-flex;vertical-align:-1px}
.wrap{max-width:1280px;margin:0 auto}
/* ============ 문서 헤더 ============ */ .doc-head{margin-bottom:40px}
/* 범례 */ .legend{background:#fff;border:1px solid var(--ink);border-radius:var(--r-lg);padding:18px 22px;margin-top:22px;display:flex;gap:28px;flex-wrap:wrap;align-items:center}
/* ============ 목차 ============ */ .toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:28px}
/* ============ 섹션 ============ */ .big-sec{margin-top:72px;scroll-margin-top:24px}
/* ============ 화면 블록 (목업 + 스펙) ============ */ .scr{margin-top:44px;scroll-margin-top:24px}
/* 디바이스 프레임 (디자이너 규격) */ .frame{background:var(--paper);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(17,18,16,.08);flex-shrink:0;position:relative}
.phone{width:340px;height:700px}
.desktop{width:1112px;height:660px;border-radius:16px}
.dt-zoom{zoom:.62}
.scroll{flex:1;overflow-y:auto;scrollbar-width:none;min-height:0}
.scroll::-webkit-scrollbar{display:none}
/* 콜아웃 배지 (스펙 대조 번호) */ .co{display:none;width:17px;height:17px;border-radius:5px;transform:rotate(45deg);background:var(--ink);align-items:center;justify-content:center;flex-shrink:0;vertical-align:-3px;box-shadow:0 0 0 2px #fff;margin:0 3px}
/* 스펙 패널 */ .spec{flex:1;min-width:380px;display:flex;flex-direction:column;gap:12px}
/* ============ IA 다이어그램 ============ */ .ia{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:24px}
/* ============ 앱 공통 목업 요소 (디자이너 컴포넌트) ============ */ .logo{font-family:var(--font-num);font-weight:700;letter-spacing:-.04em;display:flex;align-items:center;gap:7px}
.logo .sym{width:19px;height:19px;flex-shrink:0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.btn-black{background:var(--ink);color:#fff;font-weight:800;border-radius:var(--r-md);transition:opacity .15s}
.btn-black:hover{opacity:.85}
.sec-label{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 10px}
.sec-t{font-size:13px;font-weight:800;display:flex;align-items:center;gap:7px}
.sec-t::before{content:'';width:5px;height:5px;border-radius:1px;transform:rotate(45deg);background:var(--ink);flex-shrink:0}
.sec-more{font-size:10.5px;font-weight:700;color:var(--ink-45)}
.sec-more:hover{color:var(--ink)}
.limebar{height:6px;background:var(--paper-sub);border-radius:99px;overflow:hidden}
.limebar>i{display:block;height:100%;background:var(--lime);border-radius:99px}
.dia{display:inline-block;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--lime);flex-shrink:0}
.m-appbar{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px;flex-shrink:0}
.m-appbar .logo{font-size:15.5px}