*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#25383b}body{display:grid;grid-template-columns:244px minmax(0,1fr);background:#edf1f0}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}aside{background:#fff;border-right:1px solid #dde5e2;padding:32px 22px 24px;display:flex;flex-direction:column;overflow:auto}.brand{font-size:25px;font-weight:750;letter-spacing:-1.3px;display:flex;align-items:center;gap:9px}.brand-icon{display:flex;width:34px;height:34px;background:#173d43;color:#fff;align-items:center;justify-content:center;border-radius:10px;font-size:27px;padding-bottom:5px}.dot{color:#398275;margin-left:-8px}.project-label{font-size:9px;letter-spacing:1.8px;color:#8b9b98;font-weight:700;margin-top:38px}h1{font-size:18px;letter-spacing:-.6px;margin:10px 0}.intro{font-size:12px;color:#80918d;line-height:1.8;margin:0 0 32px}.section-label{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:1.2px;color:#80918d;padding:0 10px;margin-bottom:12px}.section-label span{color:#a2afac}#pages{display:grid;gap:6px}.page-link{display:flex;align-items:center;gap:12px;padding:14px 12px;border:1px solid transparent;border-radius:10px;transition:background .15s}.page-link:hover{background:#f7f9f8}.page-link[aria-current="page"]{background:#edf5f2;border-color:#dcece5;color:#1c5a4a}.page-link .num{font-size:10px;align-self:flex-start;line-height:18px;color:#91a29b;font-variant-numeric:tabular-nums}.page-link strong{display:block;font-size:13px;font-weight:650}.page-link small{display:block;font-size:10px;color:#8a9b95;margin-top:5px}.page-link .arrow{margin-left:auto;color:#3f7968}.aside-bottom{margin-top:auto;padding:35px 10px 0;font-size:11px;color:#50655e}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4e9175;margin-right:5px}.aside-bottom p{font-size:10px;color:#8b9b95;line-height:1.9;margin:9px 0 18px}.aside-bottom a{font-size:10px;text-decoration:underline;text-underline-offset:4px}main{display:flex;flex-direction:column;min-width:0;height:100dvh}.toolbar{height:85px;min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 30px;background:#fafcfb;border-bottom:1px solid #dce4e1}.current{display:flex;align-items:center;gap:13px;min-width:160px}.current>span{font-size:11px;color:#829990;border-right:1px solid #dbe5e0;padding-right:14px}h2{font-size:15px;margin:0;font-weight:650}.current p{font-size:10px;color:#8b9a95;margin:5px 0 0}.devices{display:flex;background:#eaf0ed;border:1px solid #e1e9e5;border-radius:8px;padding:3px;gap:2px}.devices button{background:transparent;border:none;border-radius:5px;color:#82938b;font-size:11px;padding:8px 13px}.devices button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px #243a3012;color:#234f40}#standalone{font-size:11px;color:#557268;white-space:nowrap}.addressbar{margin:20px 28px 0;display:flex;align-items:center;gap:8px;font:11px/1.5 ui-monospace,SFMono-Regular,monospace;color:#789088;min-height:26px}.addressbar a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.address-dot{width:6px;height:6px;border-radius:50%;background:#829b90;flex:none}.viewport-label{margin-left:auto;color:#8c9d97;white-space:nowrap;font-size:10px}#stage{flex:1;min-height:0;position:relative;margin:12px 28px 0;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}#frame-wrap{background:#fff;border-radius:8px;box-shadow:0 3px 22px #193d3010;border:1px solid #dce4df;overflow:hidden;position:relative;flex:none}iframe{border:0;display:block;transform-origin:top left;background:white}.viewer-footer{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 28px;color:#81958a;font-size:10px;line-height:1.6}.viewer-footer button{border:0;background:none;color:#4f7967;font-size:10px;white-space:nowrap}dialog{width:520px;max-width:calc(100% - 32px);border:1px solid #d5e3db;border-radius:18px;padding:32px;color:#304d40;box-shadow:0 20px 80px #142d302f}dialog::backdrop{background:#122d3066}.modal-eyebrow{font-size:9px;letter-spacing:2px;color:#869b8d;margin-bottom:14px}dialog h2{font-size:23px}dialog p,dialog li{font-size:13px;line-height:1.9;color:#718579}dialog ul{padding-left:20px}dialog button{border:0;border-radius:8px;background:#244e40;color:#fff;padding:11px 24px;float:right;margin-top:10px}:focus-visible{outline:2px solid #3d9576;outline-offset:3px}@media(max-width:900px){body{grid-template-columns:190px minmax(0,1fr)}aside{padding:24px 14px}.toolbar{padding:0 18px;gap:10px}.current{min-width:100px}.devices button{padding:8px}.current>span{display:none}.addressbar{margin-left:18px;margin-right:18px}#stage{margin-left:18px;margin-right:18px}.viewer-footer{padding-left:18px;padding-right:18px}}@media(max-width:640px){body{display:block}aside{padding:15px 16px 10px;height:135px;border-bottom:1px solid #dce4df}.brand{font-size:20px}.brand-icon{height:26px;width:26px;font-size:23px;border-radius:7px}.project-label,h1,.intro,.section-label,.aside-bottom{display:none}#pages{display:flex;overflow:auto;margin-top:14px;gap:5px;flex-shrink:0}.page-link{padding:10px 12px;flex:none;border-radius:7px}.page-link .num,.page-link small,.page-link .arrow{display:none}.page-link strong{font-size:12px;white-space:nowrap}main{height:calc(100dvh - 135px)}.toolbar{min-height:63px;height:63px;padding:0 14px}.current p{display:none}.current h2{font-size:13px}.current{min-width:auto}.devices button{padding:7px;font-size:10px}.addressbar{margin-top:10px;font-size:9px}#stage{margin-top:7px;margin-left:10px;margin-right:10px}.viewer-footer{min-height:45px;padding:8px 12px}#page-note{max-width:240px}}
body{overflow:hidden}aside{height:100dvh;min-height:0}@media(min-width:641px) and (max-height:820px){aside{padding-top:24px;padding-bottom:18px}.project-label{margin-top:22px}.intro{display:none}h1{margin-bottom:24px}.page-link{padding-top:10px;padding-bottom:10px}.page-link small{margin-top:3px}.aside-bottom{padding-top:22px}.aside-bottom p{margin-bottom:12px}}@media(max-width:640px){aside{height:135px}}
.design-switch{display:flex;background:#F1F2F3;border:1px solid #E2E4E6;border-radius:8px;padding:3px;gap:3px;margin:0 0 23px}.design-switch button{flex:1;background:transparent;border:0;border-radius:5px;font-size:10px;padding:9px 6px;color:#8A9094;white-space:nowrap}.design-switch button[aria-pressed="true"]{background:white;color:#B9362D;box-shadow:0 1px 4px #0001}body[data-design="red"]{background:#EFF0F1;color:#30363A}body[data-design="red"] .brand-icon{background:#C9362D}body[data-design="red"] .dot{color:#C9362D}body[data-design="red"] .page-link[aria-current="page"]{color:#B5352C;background:#FCF0EE;border-color:#F0DDD9}body[data-design="red"] .page-link .arrow{color:#B44C42}body[data-design="red"] .status-dot{background:#C9362D}body[data-design="red"] .toolbar{background:#FCFCFC}body[data-design="red"] .devices{background:#EBEDEF;border-color:#E1E3E5}body[data-design="red"] .devices button[aria-pressed="true"]{color:#B5352C}body[data-design="red"] .viewer-footer button{color:#A34D44}@media(min-width:641px) and (max-height:820px){.project-label{margin-top:20px}h1{margin-bottom:16px}.design-switch{margin-bottom:20px}.page-link{padding-top:8px;padding-bottom:8px}.aside-bottom{padding-top:12px}}@media(max-width:640px){.design-switch{position:absolute;right:16px;top:13px;width:155px;margin:0}.design-switch button{padding:6px;font-size:9px}}
body[data-design="red"]{background:#FFFFFF}