:root { --ink:#17211e; --muted:#66736d; --line:#dfe6e1; --paper:#f8faf8; --card:#fff; --forest:#163c30; --green:#207150; --soft:#edf5f0; --danger:#a63434; --danger-bg:#fff0ef; --shadow:0 14px 36px rgba(25,54,43,.09); font-family:ui-rounded,"SF Pro Rounded","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; color:var(--ink); background:#edf2ee; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 88% 0,#d9ebe0 0,transparent 31rem),#edf2ee; } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid #5b9c80; outline-offset:3px; } .hidden { display:none!important; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:50; padding:.6rem .9rem; border-radius:.5rem; color:#fff; background:var(--forest); } .skip-link:focus { top:1rem; }
.shell { width:min(1120px,100%); margin:0 auto; padding:max(1.1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); } .brand { display:flex; align-items:center; gap:.55rem; font-weight:760; letter-spacing:-.04em; color:var(--forest); min-height:42px; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:var(--forest); font-size:1.6rem; line-height:1; } .connection-dot { width:7px; height:7px; margin-left:.15rem; border-radius:50%; background:#a5b0aa; } .connection-dot.online { background:#38a169; } .connection-dot.offline { background:#c25c4a; }
.center-card { width:min(420px,100%); margin:clamp(5rem,15vh,9rem) auto 0; padding:2rem; border:1px solid rgba(255,255,255,.85); border-radius:1.5rem; background:rgba(255,255,255,.82); box-shadow:var(--shadow); text-align:center; } .center-card h1 { margin:.35rem 0 .75rem; font-size:1.7rem; letter-spacing:-.06em; } .center-card p { line-height:1.65; color:var(--muted); } .spinner { display:inline-block; width:25px; height:25px; border:3px solid #d8e6df; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.eyebrow { margin:0; color:var(--green); font-size:.77rem; font-weight:750; letter-spacing:.08em; } .subtle { font-size:.84rem; } .button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:49px; margin-top:.65rem; padding:.75rem 1rem; border:1px solid transparent; border-radius:.85rem; font-weight:750; transition:transform .15s,background .15s; } .button:active { transform:scale(.98); } .button:disabled { cursor:wait; opacity:.58; } .primary { color:white; background:var(--forest); box-shadow:0 8px 18px rgba(22,60,48,.2); } .secondary { color:var(--forest); border-color:#b9d3c5; background:#fff; } .danger { color:var(--danger); border-color:#edbfbd; background:#fff; }
.app { margin-top:1.7rem; } .app-header { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; } h1,h2,h3,p { overflow-wrap:anywhere; } .app-header h1 { margin:.15rem 0 0; font-size:clamp(1.5rem,5vw,2rem); letter-spacing:-.06em; } .text-button,.icon-button { border:0; color:var(--forest); background:transparent; font-weight:700; } .icon-button { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; font-size:1.4rem; } .icon-button:hover { background:var(--soft); }
.notice { margin:0 0 1rem; padding:.75rem .9rem; border:1px solid #f0d2a8; border-radius:.8rem; color:#6b4921; background:#fff8ea; font-size:.9rem; line-height:1.5; } .notice.error { color:#862e2d; border-color:#efc4c2; background:var(--danger-bg); } .layout { display:grid; gap:1rem; align-items:start; } .request-list-panel,.detail-panel { border:1px solid rgba(215,227,220,.9); border-radius:1.15rem; background:rgba(255,255,255,.9); box-shadow:0 5px 18px rgba(25,54,43,.04); } .section-heading { display:flex; align-items:center; justify-content:space-between; padding:.85rem .9rem .55rem; } .section-heading h2 { margin:0; font-size:.95rem; }
.request-list { padding:.2rem .45rem .55rem; } .request-item { width:100%; margin:.25rem 0; padding:.85rem .8rem; border:1px solid transparent; border-radius:.85rem; color:inherit; background:transparent; text-align:left; } .request-item:hover,.request-item[aria-current="true"] { border-color:#cde1d5; background:var(--soft); } .request-item strong { display:block; margin-bottom:.2rem; font-size:.94rem; } .request-meta { display:flex; gap:.45rem; color:var(--muted); font-size:.77rem; } .request-meta span+span::before { content:"·"; margin-right:.45rem; } .badge { display:inline-flex; align-items:center; width:max-content; margin-top:.43rem; padding:.18rem .45rem; border-radius:99px; color:#3e6251; background:#e5f1e9; font-size:.72rem; font-weight:700; } .badge.expired { color:#7e4031; background:#f8e5df; } .list-empty { padding:1.5rem .7rem; color:var(--muted); font-size:.9rem; text-align:center; }
.detail-panel { min-height:410px; padding:1.1rem; } .empty-state { display:grid; place-items:center; min-height:350px; padding:2rem; color:var(--muted); text-align:center; } .empty-state span { color:var(--green); font-size:2rem; } .empty-state h2 { margin:.7rem 0 .2rem; color:var(--ink); font-size:1.05rem; } .empty-state p { max-width:300px; margin:0; line-height:1.6; font-size:.9rem; }
.detail-top { display:flex; align-items:start; justify-content:space-between; gap:.6rem; } .detail-top h2 { margin:.25rem 0 0; font-size:1.22rem; letter-spacing:-.04em; } .site { margin:.35rem 0 0; color:var(--muted); font-size:.88rem; } .detail-copy { margin:1rem 0; padding:.85rem; border-radius:.75rem; background:#f5f8f6; color:#405049; line-height:1.55; font-size:.9rem; white-space:pre-wrap; } .time-status { display:flex; align-items:center; gap:.42rem; margin:.8rem 0; color:#5e6e66; font-size:.84rem; } .time-status.expired { color:var(--danger); } .action-copy { margin:1rem 0 .2rem; font-size:.88rem; color:var(--muted); line-height:1.55; } .action-row { display:grid; gap:.65rem; margin-top:.75rem; } .fine-print { margin:1rem 0 0; color:var(--muted); font-size:.77rem; line-height:1.5; }
.captcha { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); } .captcha h3 { margin:0 0 .3rem; font-size:1rem; } .captcha p { margin:.2rem 0 .8rem; color:var(--muted); font-size:.84rem; line-height:1.5; } .challenge-wrap { position:relative; display:grid; place-items:center; width:100%; min-height:160px; overflow:hidden; border:1px solid #c7d8ce; border-radius:.8rem; background:#eaf0ec; touch-action:none; user-select:none; } .challenge-image { display:block; max-width:100%; max-height:440px; object-fit:contain; } .trace-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .captcha-controls { display:grid; gap:.6rem; margin-top:.75rem; } .captcha-controls label { color:#53645b; font-size:.8rem; font-weight:700; } .captcha-controls input { width:100%; min-height:44px; margin-top:.3rem; padding:.65rem .7rem; border:1px solid #b9cec1; border-radius:.65rem; background:#fff; } .captcha-controls .button { margin:0; } .captcha-state { margin:.7rem 0 0; color:var(--muted); font-size:.78rem; }
@media (min-width:760px) { .shell { padding-top:1.8rem; } .layout { grid-template-columns:300px minmax(0,1fr); } .request-list-panel { position:sticky; top:1rem; max-height:calc(100vh - 8rem); overflow:auto; } .detail-panel { min-height:540px; padding:1.45rem; } .action-row { grid-template-columns:1fr 1fr; } .challenge-wrap { min-height:260px; } }
.vault-info { margin:.4rem 0 1rem; text-align:left; } .vault-info .vault-purpose { margin:.2rem 0 .8rem; font-weight:700; color:var(--ink); } .vault-info .vault-meta { margin:.2rem 0; color:var(--muted); font-size:.85rem; } .vault-item { display:flex; justify-content:space-between; gap:.6rem; padding:.55rem .7rem; margin:.35rem 0; border:1px solid var(--line); border-radius:.65rem; background:#f5f8f6; } .vault-item .vault-item-name { font-weight:700; overflow-wrap:anywhere; } .vault-item .vault-item-field { color:var(--green); font-size:.82rem; white-space:nowrap; } .vault-status { margin:.6rem 0; padding:.6rem .7rem; border-radius:.65rem; background:var(--soft); color:#3e6251; font-size:.88rem; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.header-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.15rem .75rem; } .danger-text { color:var(--danger); } .text-button:disabled { opacity:.4; cursor:not-allowed; }
.inline-error { margin:.7rem 0 0; padding:.65rem .8rem; border:1px solid #efc4c2; border-radius:.7rem; color:#862e2d; background:var(--danger-bg); font-size:.88rem; line-height:1.5; text-align:left; }
.inapp { margin:0 0 1rem; padding:.85rem .9rem; border:1px solid #f0d2a8; border-radius:.9rem; color:#6b4921; background:#fff8ea; font-size:.9rem; line-height:1.5; } .inapp p { margin:0; } .inapp-actions { display:grid; gap:.5rem; margin-top:.4rem; } .inapp-actions .button { margin-top:.2rem; text-decoration:none; }
.copy-input,.text-input { width:100%; min-height:44px; margin-top:.6rem; padding:.6rem .7rem; border:1px solid #b9cec1; border-radius:.65rem; background:#fff; color:var(--ink); font-size:.85rem; } .field-label { display:block; margin-top:.4rem; color:#53645b; font-size:.82rem; font-weight:700; text-align:left; } .text-input { font-size:1rem; }
.vault-card { width:min(560px,100%); text-align:left; } .vault-items { margin:.8rem 0; } .action-row.single { grid-template-columns:1fr; }
.steps { margin:1rem 0; padding-left:1.2rem; color:#405049; font-size:.9rem; line-height:1.7; }
.qr-card { margin-top:1.1rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:#fff; text-align:center; } .qr-box { width:min(260px,80vw); margin:0 auto; } .qr-box svg { display:block; width:100%; height:auto; } .qr-copy { margin:.8rem 0 0; color:#405049; font-size:.88rem; line-height:1.55; }
.device-list { margin:.8rem 0; padding:0; list-style:none; } .device-row { display:grid; grid-template-columns:1fr auto; gap:.3rem .6rem; align-items:center; padding:.75rem .2rem; border-bottom:1px solid var(--line); } .device-row strong { font-size:.95rem; } .device-row .request-meta { margin:.25rem 0 0; flex-wrap:wrap; } .device-row .badge { margin:0 0 0 .3rem; } .badge.restricted { color:#7e4031; background:#f8e5df; } .revoke-confirm { grid-column:1 / -1; } .device-subhead { margin:1.2rem 0 0; font-size:.92rem; }
.push-box { margin:.2rem .45rem .6rem; padding:.8rem .8rem .7rem; border-top:1px solid var(--line); } .push-box:empty { display:none; } .push-box h3 { margin:0 0 .3rem; font-size:.88rem; } .push-box p { margin:.25rem 0; color:var(--muted); font-size:.8rem; line-height:1.5; } .push-box .button { min-height:42px; margin-top:.5rem; } .push-box .text-input { min-height:40px; margin-top:.4rem; font-size:.9rem; } .push-state { display:inline-block; margin-left:.4rem; padding:.1rem .45rem; border-radius:99px; color:#3e6251; background:#e5f1e9; font-size:.72rem; font-weight:700; } .push-state.off { color:#7e4031; background:#f8e5df; }
.ledger-lines { margin:.7rem 0; padding-left:1.2rem; color:#26362f; font-size:.92rem; line-height:1.65; } .ledger-form { margin:.8rem 0 0; } .ledger-form textarea { width:100%; margin:.5rem 0; resize:vertical; } .chip-row { display:flex; flex-wrap:wrap; gap:.4rem; } .chip { min-height:40px; font-size:.85rem; } .chip[aria-pressed="true"] { color:#fff; background:#2f5e49; }
.pair-code { margin:.4rem 0; color:var(--forest); font-size:3.2rem; font-weight:800; letter-spacing:.28em; text-indent:.28em; font-variant-numeric:tabular-nums; } .pair-code.small { font-size:1.6rem; letter-spacing:.2em; text-indent:.2em; margin:.2rem 0; }
.pair-box { margin:.2rem .45rem .6rem; } .pair-box:empty { display:none; } .pair-item { margin:.3rem 0; padding:.8rem; border:1px solid #f0d2a8; border-radius:.85rem; background:#fff8ea; } .pair-item h3 { margin:0 0 .3rem; font-size:.9rem; } .pair-item p { margin:.25rem 0; color:#405049; font-size:.82rem; line-height:1.5; } .pair-item .action-row { margin-top:.5rem; } .pair-item .button { min-height:42px; margin-top:0; }
.countdown { margin:1rem 0 0; padding:.6rem .8rem; border-radius:.75rem; background:var(--soft); color:var(--forest); font-weight:750; font-variant-numeric:tabular-nums; text-align:center; } .countdown.urgent { color:var(--danger); background:var(--danger-bg); }
a.button { text-decoration:none; }
.badge { white-space:nowrap; flex-shrink:0; }
/* 맥 자료 열람 (11-01): long "what / returns / never" texts stack under their label */
.vault-items.mac .vault-item { flex-direction:column; gap:.2rem; } .vault-items.mac .vault-item-name { white-space:nowrap; } .vault-items.mac .vault-item-field { white-space:normal; font-size:.88rem; }