/* Service identity is an accent. State surfaces stay quiet and readable. */
.service-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:280px;padding:40px 24px;color:#171717;background:#fff;text-align:center;font-family:var(--ml-font,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
.service-state[hidden]{display:none}
.service-state-identity{display:flex;align-items:center;justify-content:center;gap:16px;min-height:40px}
.service-state-logo{display:block;width:48px;height:44px;object-fit:contain;flex:none}
.service-state:not(.is-compact) .service-state-logo{width:96px;height:86px}
.service-state[data-state=loading] .service-state-logo{width:112px;height:100px;transform-origin:50% 85%;animation:service-state-hop 2s var(--ml-ease,cubic-bezier(.2,.8,.2,1)) infinite}
.service-state-copy{max-width:58ch}
.service-state-copy h2{margin:0;font-size:22px;line-height:1.45;font-weight:750;letter-spacing:-.025em;text-wrap:balance}
.service-state-copy p{margin:12px 0 0;font-size:16px;line-height:1.65;color:#656561;overflow-wrap:anywhere}
.service-state-loading-word{margin-bottom:10px;color:var(--ml-brand-text,#756000);font:700 26px/1.3 var(--ml-font-heading,var(--ml-font,"Pretendard Variable",Pretendard,sans-serif));letter-spacing:0;white-space:nowrap}
.service-state-dots{display:inline-flex;min-width:1.1em}
.service-state-dots>span{display:inline-block}
.service-state[data-state=loading] .service-state-copy h2{font-size:16px;font-weight:650;line-height:1.5;color:#656561}
.service-state-character{display:block;width:80px;height:80px;object-fit:contain;flex:none}
.service-state-spinner{display:block;box-sizing:border-box;width:24px;height:24px;border:3px solid #e5e5df;border-top-color:var(--ml-brand-text,#756000);border-radius:50%;animation:service-state-spin .85s linear infinite}
.service-state.is-compact[data-state=loading]{display:grid;grid-template-columns:24px minmax(0,1fr);justify-content:start;align-items:center;gap:12px;min-height:0;padding:16px 8px;text-align:left}
.service-state.is-compact[data-state=loading] .service-state-identity{min-height:24px}
.service-state.is-compact[data-state=loading] .service-state-copy h2{font-size:15px}
.service-state.is-compact[data-state=loading] .service-state-skeleton,.service-state.is-compact[data-state=loading] .service-state-actions{grid-column:1/-1}
.service-state-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:4px}
.service-state-action{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;max-width:100%;padding:12px 20px;border:1px solid #d9d9d3;border-radius:8px;color:#302700;background:#fff;font:700 16px/1.4 var(--ml-font,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);text-decoration:none;cursor:pointer;overflow-wrap:anywhere}
.service-state-action.is-primary{border-color:#ffe019;background:#ffe019}
.service-state-action-logo{display:block;width:32px;height:28px;object-fit:contain;flex:none}
.service-state-action:hover{background:#f7f7f4}
.service-state-action.is-primary:hover{background:#ffdf00;border-color:#ffdf00}
.service-state-action:focus-visible,.service-state-copy h2:focus-visible{outline:3px solid #756000;outline-offset:3px}
.service-state-action:disabled{cursor:wait;opacity:.55}
.service-state.is-overlay{width:min(100%,560px);min-height:0;max-height:calc(100dvh - 32px);margin:auto;border-radius:16px;overflow:auto}
.service-state-skeleton{display:grid;width:min(100%,560px);gap:12px}
.service-state-skeleton span{display:block;background:#efefeb;border-radius:8px;animation:service-state-pulse 1.8s ease-in-out infinite}
.service-state-skeleton.is-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-state-skeleton.is-cards span{height:96px}
.service-state-skeleton.is-list span{height:48px}
@keyframes service-state-spin{to{transform:rotate(360deg)}}
@keyframes service-state-pulse{50%{opacity:.55}}
@keyframes service-state-hop{0%,12%,48%,100%{transform:translateY(0) scale(1)}18%,36%{transform:translateY(0) scale(1.03,.97)}27%{transform:translateY(-4px) scale(.99,1.03)}}
@media(max-width:600px){.service-state{min-height:240px;padding:32px 16px;gap:16px}.service-state-copy h2{font-size:20px}.service-state-actions{width:100%}.service-state-action{flex:1 1 auto}.service-state-skeleton.is-cards span{height:72px}}
@media(max-height:540px) and (min-width:560px){.service-state{min-height:0;padding:20px 24px;gap:12px}.service-state:not(.is-compact) .service-state-logo{width:72px;height:64px}.service-state[data-state=loading] .service-state-logo{width:96px;height:86px}.service-state-identity{min-height:36px}.service-state-character{width:56px;height:56px}.service-state-copy h2{font-size:20px}.service-state-loading-word{font-size:24px;margin-bottom:8px}.service-state-copy p{margin-top:8px;line-height:1.5}.service-state-action{min-height:44px;padding:10px 16px}.service-state-skeleton.is-cards span{height:60px}}
@media(prefers-reduced-motion:reduce){.service-state[data-state=loading] .service-state-logo,.service-state-spinner,.service-state-skeleton span{animation:none;opacity:1;transform:none}}
