:root{font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif;color:#183f35;background:#f4f6f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:980px;margin:auto;padding:34px 24px}.brand{color:inherit;font-weight:800;text-decoration:none;font-size:20px}.brand span{font-size:13px;color:#6b8077;margin-left:14px}header{padding:56px 0 30px}.eyebrow{color:#698675;font-size:13px;letter-spacing:.08em}h1{font-size:clamp(32px,5vw,52px);line-height:1.3;letter-spacing:-.05em;font-weight:650}p{line-height:1.8;color:#52685e}.card{padding:28px;background:#fff;border:1px solid #e1e9df;border-radius:22px;margin:18px 0}h2{font-size:21px;margin:0 0 14px}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #dce4da;border-radius:12px;padding:13px 17px;background:#fff;color:#244a3d;min-height:46px}button:disabled{opacity:.5;cursor:not-allowed}button:hover:not(:disabled){border-color:#406955}.providers,.row{display:flex;gap:10px;flex-wrap:wrap}.providers button{flex:1}#kakao{background:#fee500;color:#191919;border-color:#fee500}#naver{background:#03c75a;color:white;border-color:#03c75a}.primary{background:#225a43;color:white;border-color:#225a43}.subtle{background:transparent;border:0;text-decoration:underline}.small{font-size:13px;color:#708278}#status,#vault-status,#connection-status{font-size:14px;color:#7d492b}.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.site{display:flex;flex-direction:column;border:1px solid #e2e8df;border-radius:14px;padding:18px}.site a{color:#285b45;text-decoration:none;font-weight:700}.site small{color:#74877a;margin:10px 0}.site button{font-size:13px}label{display:block;font-size:14px;margin:18px 0}input,textarea{display:block;width:100%;margin-top:7px;border:1px solid #cfdbd0;border-radius:10px;padding:12px;color:#264438;background:#fafbf8}footer{text-align:center;color:#7b8b7f;font-size:12px;padding:26px}#items{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}[hidden]{display:none!important}@media(max-width:550px){main{padding:24px 16px}.card{padding:22px 18px}.providers{flex-direction:column}header{padding-top:35px}.site-grid{grid-template-columns:1fr 1fr}.site{padding:13px}}

:root{--button-edge:#c6d4c9}
/* SOFTM-BUTTON-FEEDBACK START 날짜:20261028 : 터치와 처리 중 상태를 즉시 구분 */
button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-weight:650;line-height:1.4;box-shadow:0 3px 0 var(--button-edge),0 4px 8px #183f350d;transition:transform 90ms ease,box-shadow 90ms ease,filter 120ms ease,background-color 120ms ease;touch-action:manipulation;-webkit-tap-highlight-color:#2d76552b}
#kakao{--button-edge:#c8b100}#naver{--button-edge:#028b3f}.primary{--button-edge:#153d2d}.subtle{box-shadow:none}
@media(hover:hover){button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(.97);box-shadow:0 4px 0 var(--button-edge),0 6px 12px #183f3514}.subtle:hover:not(:disabled){box-shadow:none;background:#eef3ed}}
button:active:not(:disabled){transform:translateY(2px) scale(.985);filter:brightness(.9);box-shadow:inset 0 2px 4px #102d2429,0 1px 0 var(--button-edge)}
button:focus-visible{outline:3px solid #277452;outline-offset:4px}
button:disabled{transform:none;box-shadow:none}
button[aria-busy=true]{opacity:1;cursor:wait;filter:none;box-shadow:inset 0 1px 3px #183f3514}
button[aria-busy=true]::before{content:"";width:1em;height:1em;flex:0 0 1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:button-spin .7s linear infinite}
#status,#vault-status,#connection-status{min-height:1.8em;overflow-wrap:anywhere}
#status[data-state=busy],#vault-status[data-state=busy],#connection-status[data-state=busy]{color:#285b45;background:#edf5ef;border-radius:10px;padding:10px 12px}
#status[data-state=success],#vault-status[data-state=success],#connection-status[data-state=success]{color:#216345}
#status[data-state=error],#vault-status[data-state=error],#connection-status[data-state=error]{color:#933c32;background:#fff1ed;border-radius:10px;padding:10px 12px}
@keyframes button-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled),button:hover:not(:disabled){transform:none}button[aria-busy=true]::before{animation:none}}
/* SOFTM-BUTTON-FEEDBACK END */


/* SOFTM-SITE-CONNECTION START 날짜:20261028 : 팝업 첫 화면에서 계정과 연결 대상을 확인 */
body.connection-view main{max-width:560px;padding:20px 16px}body.connection-view .brand{font-size:18px}body.connection-view header,body.connection-view #sites-card,body.connection-view #link-section,body.connection-view #vault,body.connection-view footer{display:none!important}body.connection-view .card{padding:20px;margin:16px 0}body.connection-view #grant{margin-top:22px}body.connection-view #grant h2{font-size:24px}body.connection-view #grant-origin{overflow-wrap:anywhere;margin:4px 0;color:#60766a}body.connection-view #grant-user{font-weight:650;margin:12px 0}body.connection-view .grant-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}body.connection-view #continue{width:100%;min-height:50px}body.connection-view #login-card h2{font-size:18px}
/* SOFTM-SITE-CONNECTION END */


.connection-view #signup-card{display:block}.connection-view #signup-card[hidden]{display:none}#signup-card input[type=checkbox]{width:20px;height:20px;vertical-align:middle;margin-right:6px}#signup-card label{margin:16px 0}#signup-status[data-state=error]{color:#8c332b}


.connection-view #withdrawal{display:none}#withdrawal table{width:100%;border-collapse:collapse;font-size:14px}#withdrawal th,#withdrawal td{padding:10px;border:1px solid #dce5dd;text-align:left;vertical-align:top}#withdrawal input[type=checkbox]{width:20px;height:20px;vertical-align:middle}#withdraw-confirmation{display:block;width:100%;padding:12px;border:1px solid #b9cbbf;border-radius:10px;font:inherit;margin:8px 0 16px}.danger{background:#9a352c;color:#fff;border-color:#9a352c}#withdraw-status[data-state=error]{color:#9a352c}#withdraw-status[data-state=success]{padding:12px;background:#e9f3eb;border-radius:10px}