:root { --ink:#133930; --deep:#0a241e; --paper:#f4f1e9; --lime:#d6f264; --coral:#fa7857; --muted:#61746d; --line:rgba(19,57,48,.18); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif; }
.shell { width:min(1120px,calc(100% - 40px)); min-height:100vh; margin:0 auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:78px; align-items:center; padding:52px 0; }
.eyebrow { margin:0 0 13px; color:var(--muted); font:600 .7rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }
.brand-block h1 { margin:0; font-size:clamp(2.8rem,6vw,5.4rem); line-height:1.08; letter-spacing:-.085em; }.brand-block > p:not(.eyebrow) { max-width:415px; margin:25px 0; color:var(--muted); line-height:1.75; word-break:keep-all; }.brand-block a { display:inline-block; padding-bottom:4px; border-bottom:2px solid var(--coral); color:var(--ink); font-size:.9rem; font-weight:800; text-decoration:none; }
.panel { padding:36px; border:1px solid var(--ink); background:#fff; box-shadow:12px 12px 0 var(--lime); }.panel h2 { margin:0 0 27px; font-size:1.6rem; letter-spacing:-.055em; }.panel label:not(.switch-row) { display:block; margin:22px 0 8px; font-size:.85rem; font-weight:800; }.panel input:not([type=checkbox]), .panel textarea { width:100%; border:1px solid var(--line); border-radius:2px; padding:13px; color:var(--ink); background:#fafaf7; font:inherit; }.panel textarea { resize:vertical; }.panel input:focus, .panel textarea:focus { outline:2px solid var(--ink); outline-offset:1px; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:10px 17px; border:1px solid transparent; border-radius:2px; font:800 .88rem inherit; cursor:pointer; }.primary { background:var(--ink); color:#fff; }.primary:hover { background:#1d5144; }.feedback { min-height:22px; margin:0; color:var(--muted); font-size:.8rem; line-height:1.5; }.feedback.error { color:#b53a24; }.feedback.success { color:#1c6a48; }.field-help { display:block; margin-top:6px; color:var(--muted); font-size:.73rem; line-height:1.55; }.dashboard-head { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:16px; }.dashboard-head .eyebrow { margin-bottom:6px; }.text-button { border:0; padding:4px 0; background:transparent; color:var(--muted); font:800 .8rem inherit; cursor:pointer; }.text-button:hover { color:var(--ink); }.switch-row { display:flex; gap:18px; justify-content:space-between; align-items:center; margin:0 0 25px; padding:18px; border:1px solid var(--line); background:var(--paper); cursor:pointer; }.switch-row strong, .switch-row small { display:block; }.switch-row strong { margin-bottom:4px; font-size:.89rem; }.switch-row small { max-width:330px; color:var(--muted); font-size:.73rem; line-height:1.5; }.switch-row input { position:relative; width:48px; height:27px; appearance:none; flex:none; border-radius:99px; background:#c2cbc7; cursor:pointer; transition:.2s; }.switch-row input::before { content:""; position:absolute; top:4px; left:4px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:.2s; }.switch-row input:checked { background:var(--ink); }.switch-row input:checked::before { transform:translateX(21px); }.save-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }.password-card { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; line-height:1.6; }.password-card summary { color:var(--ink); font-weight:800; cursor:pointer; }.password-card p { margin:13px 0 0; word-break:keep-all; }
@media (max-width:800px) { .shell { grid-template-columns:1fr; gap:38px; padding:44px 0; }.brand-block { max-width:580px; }.panel { padding:26px 20px; }.save-row { flex-direction:column; align-items:stretch; }.save-row .button { width:100%; } }