:root{--surface-primary: #F4F8FF;--surface-phone: #FFFFFF;--surface-secondary: #F7FAFF;--surface-elevated: #FFFFFF;--surface-blue-soft: #EAF3FF;--text-primary: #102033;--text-secondary: #607086;--text-tertiary: #94A3B8;--border-default: #D8E4F5;--border-subtle: #E9F0FA;--accent-primary: #1769FF;--accent-hover: #0B55D8;--accent-deep: #0B2E6F;--status-success: #21A67A;--status-warning: #F59E0B;--status-error: #E5484D;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px;--radius-pill: 999px;--shadow-subtle: 0 1px 2px rgba(23, 105, 255, .06);--shadow-default: 0 14px 34px rgba(23, 105, 255, .12);--shadow-prominent: 0 24px 70px rgba(11, 46, 111, .18);--ease-standard: cubic-bezier(.2, .8, .2, 1);--ease-meter: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html{min-width:320px;background:radial-gradient(circle at 20% 10%,rgba(23,105,255,.14),transparent 28%),radial-gradient(circle at 84% 0%,rgba(99,179,255,.22),transparent 24%),var(--surface-primary);color:var(--text-primary)}body{min-width:320px;min-height:100dvh;margin:0;font-family:Segoe UI Variable,Noto Sans KR,Apple SD Gothic Neo,sans-serif;line-height:1.5;text-rendering:optimizeLegibility;word-break:keep-all}button,input,select{font:inherit}button{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}:focus-visible{outline:3px solid rgba(23,105,255,.32);outline-offset:3px}.demo-stage{display:grid;min-height:100dvh;place-items:center;padding:var(--space-4)}.phone-frame{position:relative;display:grid;grid-template-rows:38px minmax(0,1fr) auto;width:min(430px,calc(100vw - 24px));aspect-ratio:9 / 20;max-height:calc(100dvh - 32px);overflow:hidden;border:1px solid rgba(23,105,255,.16);border-radius:38px;background:var(--surface-phone);box-shadow:var(--shadow-prominent)}.phone-status{display:flex;align-items:end;justify-content:space-between;padding:0 var(--space-5) var(--space-2);color:var(--text-secondary);font-size:12px;font-weight:700}.screen-viewport{position:relative;min-height:0;overflow:hidden;background:linear-gradient(180deg,rgba(234,243,255,.72),transparent 190px),var(--surface-phone)}.view-screen{height:100%;overflow-y:auto;padding:var(--space-4) var(--space-4) var(--space-6);animation:view-enter .22s var(--ease-standard) both}@keyframes view-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.eyebrow,.card-label{display:inline-flex;width:max-content;max-width:100%;color:var(--accent-primary);font-size:11px;font-weight:800;letter-spacing:.04em}h1,h2,h3,p{overflow-wrap:anywhere}h1{margin:var(--space-1) 0 0;color:var(--accent-deep);font-size:32px;font-weight:800;line-height:1.12;letter-spacing:0}h2{margin:0 0 var(--space-3);font-size:22px;line-height:1.25}h3{margin:0;font-size:17px;line-height:1.35}p{margin:var(--space-2) 0 0;color:var(--text-secondary);font-size:13px}.login-brand,.home-hero,.login-card,.info-card,.meter-card,.stage-card,.document-card,.my-detail,.metric-card,.admin-card,.admin-form{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-elevated);box-shadow:var(--shadow-subtle)}.login-brand{padding:var(--space-5);margin-bottom:var(--space-3);background:linear-gradient(145deg,var(--surface-elevated),var(--surface-blue-soft));box-shadow:var(--shadow-default)}.login-card,.admin-form,.admin-card,.info-card,.meter-card,.stage-card,.document-card,.my-detail,.metric-card{padding:var(--space-4);margin-bottom:var(--space-3)}.security-note{padding:var(--space-3);border-radius:var(--radius-md);color:var(--text-secondary);background:var(--surface-secondary);font-size:12px}.field{display:grid;gap:var(--space-1);margin-bottom:var(--space-3);color:var(--text-secondary);font-size:12px;font-weight:800}.field input,.field select,select{width:100%;min-height:42px;padding:0 var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);background:var(--surface-phone)}.check-field{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);color:var(--text-secondary);font-size:13px;font-weight:800}.form-error{min-height:20px;margin:0 0 var(--space-2);color:var(--status-error);font-weight:800}.form-row,.button-row{display:grid;grid-template-columns:1fr;gap:var(--space-2)}.primary-button,.secondary-button,.danger-button,.back-button,.bottom-nav button,.pagination button,.my-button,.service-button,.preview-cta,.admin-tabs button{transition:transform .14s var(--ease-standard),color .22s var(--ease-standard),background-color .22s var(--ease-standard),box-shadow .22s var(--ease-standard),border-color .22s var(--ease-standard)}.primary-button,.secondary-button,.danger-button,.preview-cta{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:48px;padding:0 var(--space-4);border-radius:var(--radius-pill);font-weight:800}.primary-button,.preview-cta{color:var(--surface-elevated);background:var(--accent-primary);box-shadow:0 12px 24px #1769ff3d}.secondary-button{color:var(--accent-primary);background:var(--surface-blue-soft)}.danger-button{color:var(--status-error);background:#e5484d1f}.logout-button{margin-top:var(--space-3)}.primary-button:active,.secondary-button:active,.danger-button:active,.service-button:active,.preview-cta:active,.back-button:active,.bottom-nav button:active,.pagination button:active,.my-button:active,.admin-tabs button:active{transform:scale(.97);color:var(--surface-elevated);background:var(--accent-hover)}.home-hero{display:grid;gap:var(--space-3);min-height:154px;padding:var(--space-5);background:radial-gradient(circle at 88% 18%,rgba(23,105,255,.18),transparent 26%),linear-gradient(145deg,var(--surface-elevated),var(--surface-blue-soft));box-shadow:var(--shadow-default)}.hero-unit{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:54px;padding:var(--space-3);border-radius:var(--radius-md);background:#ffffffb8}.hero-unit span,.home-summary span,.amount-grid span,.meter-row span,.compact-info dt,.mini-stat span{color:var(--text-secondary);font-size:13px}.hero-unit strong{color:var(--text-primary);font-size:18px}.service-section,.home-summary,.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}.service-button{display:grid;align-content:center;justify-items:start;gap:var(--space-2);min-height:102px;padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-primary);background:var(--surface-elevated);box-shadow:var(--shadow-subtle);text-align:left}.nav-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--accent-primary);background:var(--surface-blue-soft)}.service-button strong{font-size:16px;line-height:1.25}.service-section+.preview-cta{margin-top:var(--space-3)}.home-summary article{min-height:86px;padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-elevated)}.home-summary strong,.metric-card strong{display:block;margin-top:var(--space-1);color:var(--accent-deep);font-size:22px}.page-heading,.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.back-button{display:grid;flex:0 0 42px;place-items:center;width:42px;height:42px;border:1px solid var(--border-subtle);border-radius:50%;color:var(--accent-primary);background:var(--surface-elevated)}.meter-row,.amount-grid div,.compact-info div{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.meter-row strong{color:var(--accent-primary);font-size:26px;line-height:1}.progress-track{height:12px;margin-top:var(--space-3);overflow:hidden;border-radius:var(--radius-pill);background:var(--surface-blue-soft)}.progress-track span{display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-primary),#63A8FF);transition:width .9s var(--ease-meter)}.stage-list,.payment-stage-list,.document-list,.preview-grid,.admin-list,.activity-list{display:grid;gap:var(--space-3)}.stage-card header,.document-card header{display:flex;align-items:start;justify-content:space-between;gap:var(--space-3)}.stage-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-3)}.mini-stat{padding:var(--space-2);border-radius:var(--radius-sm);background:var(--surface-secondary)}.mini-stat strong,.compact-info dd{display:block;margin:0;color:var(--text-primary);font-size:13px;font-weight:750;text-align:right}.status-chip{display:inline-flex;flex:0 0 auto;align-items:center;min-height:26px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);color:var(--accent-primary);background:#1769ff1f;font-size:12px;font-weight:800}.file-name{color:var(--accent-deep);font-family:Cascadia Mono,SFMono-Regular,monospace;font-size:12px}.document-kind{color:var(--accent-primary);font-size:11px;font-weight:800}.pagination{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-4)}.pagination button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--accent-primary);background:var(--surface-blue-soft);font-weight:800}.pagination button.is-active,.bottom-nav button.is-active,.admin-tabs button.is-active,.my-button.is-selected{color:var(--surface-elevated);background:var(--accent-primary)}.my-button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}.my-button{min-height:82px;padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-primary);background:var(--surface-elevated);text-align:left;font-size:16px;font-weight:800}.my-detail ul,.activity-list{padding:0;margin:var(--space-2) 0 0;list-style:none}.my-detail li,.activity-list li{padding:var(--space-2);border-radius:var(--radius-sm);color:var(--text-secondary);background:var(--surface-secondary);font-size:13px}.preview-visual{padding:var(--space-4);margin-bottom:var(--space-4);border-radius:28px;background:radial-gradient(circle at 70% 18%,rgba(23,105,255,.18),transparent 30%),linear-gradient(145deg,#f9fcff,#eaf3ff)}.floor-plan{position:relative;height:236px;border:3px solid var(--accent-primary);border-radius:22px;background:linear-gradient(90deg,transparent 61%,var(--accent-primary) 61% 62%,transparent 62%),linear-gradient(0deg,transparent 56%,var(--accent-primary) 56% 57%,transparent 57%),#ffffffc2;box-shadow:inset 0 0 0 10px #1769ff0d}.room{position:absolute;display:grid;place-items:center;border-radius:var(--radius-md);color:var(--accent-deep);background:#ffffffc7;font-size:12px;font-weight:800}.living{inset:18px 42% 48% 18px}.kitchen{inset:56% 42% 18px 18px}.bed{inset:18px 18px 47% 64%}.bath{inset:58% 18px 18px 64%}.admin-screen{padding-bottom:var(--space-4)}.admin-tabs{display:flex;gap:var(--space-2);margin:0 0 var(--space-4);overflow-x:auto;padding-bottom:var(--space-1)}.admin-tabs button{flex:0 0 auto;min-height:38px;padding:0 var(--space-3);border-radius:var(--radius-pill);color:var(--accent-primary);background:var(--surface-blue-soft);font-size:12px;font-weight:800}.metric-card span{color:var(--text-secondary);font-size:12px}.admin-panel h2{margin-top:var(--space-2)}.bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-1);padding:var(--space-2) var(--space-3) var(--space-3);border-top:1px solid var(--border-subtle);background:#fffffff0}.bottom-nav[hidden]{display:none}.bottom-nav button{display:grid;justify-items:center;gap:2px;min-height:52px;padding:var(--space-2) var(--space-1);border-radius:var(--radius-md);color:var(--text-tertiary);background:transparent;font-size:11px;font-weight:800}.bottom-nav .nav-icon{width:auto;height:auto;color:var(--accent-primary);background:transparent}.bottom-nav svg{width:19px;height:19px}.bottom-nav button.is-active .nav-icon,.bottom-nav button.is-active:hover .nav-icon{color:var(--surface-elevated)}.bottom-nav button.is-active:hover{color:var(--surface-elevated);background:var(--accent-primary)}.service-button:hover,.back-button:hover,.bottom-nav button:hover,.pagination button:hover,.my-button:hover,.admin-tabs button:hover{color:var(--accent-primary);background:var(--surface-blue-soft)}.toast{position:fixed;left:50%;bottom:24px;z-index:10;max-width:min(360px,calc(100vw - 32px));padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);color:var(--surface-elevated);background:var(--accent-deep);box-shadow:var(--shadow-default);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .22s var(--ease-standard),transform .22s var(--ease-standard)}.toast.is-visible{opacity:1;transform:translate(-50%)}@media(max-height:820px){.phone-frame{width:min(390px,calc(100vw - 24px))}.home-hero{min-height:136px;padding:var(--space-4)}.service-button{min-height:92px}h1{font-size:28px}}@media(max-width:380px){.demo-stage{padding:var(--space-2)}.phone-frame{width:min(360px,calc(100vw - 16px));border-radius:30px}.view-screen{padding-inline:var(--space-3)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;transition-duration:1ms!important}}.admin-topbar h1{max-width:150px;font-size:28px;line-height:1.05;overflow-wrap:normal;word-break:keep-all}.admin-topbar .secondary-button{flex:0 0 168px;width:168px}.phase-shell{min-height:100%}.phase-shell .admin-panel,.phase-shell .home-hero{margin-bottom:var(--space-3)}.phase-shell p{line-height:1.6}.phase-status h1{font-size:22px}.admin-topbar .shell-logout,.shell-logout{flex:0 0 auto;width:auto;min-width:86px;min-height:40px;padding:0 var(--space-3);font-size:12px}button:disabled{cursor:default}.admin-tabs button:disabled,.bottom-nav button:disabled{opacity:1}.login-card button:disabled{opacity:.72}.admin-record-card{display:grid;grid-template-columns:1fr;gap:var(--space-2);width:100%;padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);background:var(--surface-elevated);text-align:left;box-shadow:var(--shadow-subtle)}.admin-record-card.is-selected{border-color:var(--accent-primary);background:var(--surface-blue-soft)}.admin-record-card span{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.admin-record-card small{color:var(--text-secondary);font-size:12px;font-weight:700}.compact-admin-form{box-shadow:none}.unit-chip-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.unit-chip-list button{min-height:34px;padding:0 var(--space-3);border-radius:var(--radius-pill);color:var(--accent-primary);background:var(--surface-blue-soft);font-size:12px;font-weight:800}.info-card .compact-info div{min-height:32px}.payment-context-card{padding:var(--space-3);margin-bottom:var(--space-3);border-radius:var(--radius-md);background:var(--surface-secondary)}.payment-context-card strong{display:block;margin-top:var(--space-1);color:var(--text-primary);font-size:18px}.payment-item-form header{display:flex;align-items:start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.payment-item-form h3{margin:0;font-size:16px}.admin-tabs a{display:inline-flex;align-items:center;flex:0 0 auto;min-height:38px;padding:0 var(--space-3);border-radius:var(--radius-pill);color:var(--accent-primary);background:var(--surface-blue-soft);font-size:12px;font-weight:800;text-decoration:none}.admin-tabs a.is-active{color:var(--surface-elevated);background:var(--accent-primary)}.bottom-nav a{display:grid;justify-items:center;gap:2px;min-height:52px;padding:var(--space-2) var(--space-1);border-radius:var(--radius-md);color:var(--text-tertiary);background:transparent;font-size:11px;font-weight:800;text-decoration:none}.bottom-nav a.is-active{color:var(--surface-elevated);background:var(--accent-primary)}.bottom-nav a.is-active .nav-icon{color:var(--surface-elevated)}.management-action-grid{display:grid;gap:var(--space-3)}.primary-button,.secondary-button{text-decoration:none}.payment-contractor-card strong{overflow-wrap:anywhere}.animated-progress{margin-top:var(--space-3)}
