:root{--ink: #EDE3D3;--ink-dim: #A99C87;--line: #EDE3D3;--accent: #D2774A;--glass: #7FB9C9;--night: #182322;--night-2: #1E2C2B;--paper: #F5F0E8;--paper-ink: #2A2420;--paper-muted: #7A6E63;--paper-line: #DCD2C4;--terracotta: #B8643C;--f-display: "Hahmlet", "Noto Serif KR", serif;--f-body: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;--f-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font:14px/1.6 var(--f-body);background:var(--paper);color:var(--paper-ink)}.auth{height:100vh;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(380px,1fr)}.brand-side{position:relative;overflow:hidden;color:var(--ink);padding:48px clamp(28px,4vw,64px) 36px;display:flex;flex-direction:column;gap:20px;min-height:0;background-color:var(--night);background-image:linear-gradient(rgba(237,227,211,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(237,227,211,.045) 1px,transparent 1px),linear-gradient(rgba(237,227,211,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(237,227,211,.02) 1px,transparent 1px),radial-gradient(120% 90% at 30% 20%,var(--night-2),var(--night));background-size:60px 60px,60px 60px,12px 12px,12px 12px,100% 100%}.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--accent)}.brand-side h1{margin:10px 0 12px;font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3.4vw,46px);line-height:1.18;letter-spacing:-.01em}.lede{margin:0;max-width:62ch;word-break:keep-all;text-wrap:pretty;color:var(--ink-dim);font-size:15px;line-height:1.75}.drawing{margin:0;flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center}.drawing svg{width:100%;flex:1 1 0;min-height:0;display:block}.drawing figcaption{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-dim);margin-top:6px}.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.steps li{counter-increment:s;border-top:1px solid rgba(237,227,211,.18);padding-top:10px;display:flex;flex-direction:column;gap:2px}.steps li:before{content:"0" counter(s);font-family:var(--f-mono);font-size:11px;color:var(--accent)}.steps b{font-weight:600;font-size:13.5px}.steps span{color:var(--ink-dim);font-size:12.5px;line-height:1.5;word-break:keep-all}#plan .wall{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:square;stroke-linejoin:miter}#plan .part{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:square}#plan .glz{fill:none;stroke:var(--glass);stroke-width:3;stroke-dasharray:10 3}#plan .door{fill:none;stroke:var(--accent);stroke-width:1.4}#plan .dim{fill:none;stroke:var(--ink-dim);stroke-width:1}#plan .dimt{fill:var(--ink-dim);font:500 11px var(--f-mono);text-anchor:middle}#plan .furn{fill:none;stroke:var(--ink);stroke-width:1.2;transform-box:fill-box;transform-origin:center}#plan .equip{fill:#ede3d314;stroke:var(--ink-dim);stroke-width:1.2}#plan .tint{stroke:none}#plan .lbl{fill:var(--ink);font:600 14px var(--f-body);text-anchor:middle;dominant-baseline:central}#plan .lbl2{fill:var(--ink-dim);font:500 10.5px var(--f-mono);text-anchor:middle;dominant-baseline:central}#plan .pen{fill:var(--accent)}.form-side{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 28px 24px;position:relative}.login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px}.mark{display:flex;align-items:center;gap:10px;color:var(--terracotta);font-family:var(--f-display);font-weight:600;font-size:17px;margin-bottom:18px}.mark svg{width:30px;height:30px}.mark span{color:var(--paper-ink)}.login h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:28px}.sub{margin:-8px 0 8px;color:var(--paper-muted)}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--paper-muted)}.field input{width:100%;font:inherit;font-size:15px;color:var(--paper-ink);background:#fffdf9;border:1px solid var(--paper-line);border-radius:6px;padding:11px 12px}.field input:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px #b8643c26}.pw{position:relative;display:block}.pw input{padding-right:56px}.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--paper-muted);font:inherit;font-size:12.5px;padding:6px 8px;cursor:pointer;border-radius:4px}.pw button:hover{color:var(--paper-ink)}.msg{margin:0;min-height:1.3em;color:#b3402e;font-size:13px}.go{font:inherit;font-size:15px;font-weight:600;color:#fff;background:var(--paper-ink);border:0;border-radius:6px;padding:13px;cursor:pointer;transition:background .15s}.go:hover{background:var(--terracotta)}.go:disabled{opacity:.6;cursor:wait}.foot{margin:4px 0 0;color:var(--paper-muted);font-size:12.5px}.copy{position:absolute;bottom:18px;margin:0;font-family:var(--f-mono);font-size:11px;color:var(--paper-muted)}:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}@media(max-width:960px){.auth{grid-template-columns:minmax(0,1fr);height:auto}.brand-side{padding:32px 22px 24px}.drawing{flex:none}.drawing svg{flex:none;height:280px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.form-side{padding:36px 22px 56px}}
