@charset "UTF-8";
:root{color-scheme:light;--paper:#fafaf8;--ink:#292d2b;--muted:#6c716d;--green:#325f4a;--blue:#448ef7;--purple:#7052b2;font-family:Inter,"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
button{font:inherit;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
::selection{background:#7052b222}
.wrap{width:min(833px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:12px;padding:12px 20px;background:white;color:var(--ink);z-index:20;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:27px}
.brand{display:flex;align-items:center;gap:4px;flex-shrink:0}
.brand span{font-size:25px;font-weight:650;letter-spacing:-1.15px}
.brand img{flex-shrink:0}
.product-type{font-size:11px;color:var(--muted)}
.hero{text-align:center;padding-top:35px}
h1,p{margin:0}
h1{font-size:clamp(36px,5vw,54px);font-weight:650;line-height:1.48;letter-spacing:-.065em}
.marker{--mark:var(--purple);--tint:#7052b214;display:inline;background:linear-gradient(transparent 19%,var(--tint) 19%,var(--tint) 91%,transparent 91%);text-decoration:underline;text-decoration-color:var(--mark);text-decoration-thickness:3px;text-underline-offset:8px;padding-inline:2px}
.marker.blue{--mark:var(--blue);--tint:#448ef715}
.period{color:var(--green)}
.hero-description{margin-top:23px;font-size:14px;line-height:1.9;letter-spacing:-.025em;color:var(--muted)}
.mobile-break{display:none}
.preview{margin-top:43px}
.screenshot-button{border:1px solid #d9ddd6;border-radius:11px;overflow:hidden;padding:0;background:#fff;display:block;width:100%;cursor:zoom-in;position:relative;box-shadow:0 22px 65px -28px #24372d2e,0 2px 5px #24372d05}
.product-screenshot{width:100%;height:auto}
.image-zoom{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;background:#fffffff0;border:1px solid #d7dcd5;border-radius:6px;color:#555f55;transition:background .2s}
.screenshot-button:hover .image-zoom{background:#fff}
.screenshot-button:focus-visible{outline-offset:5px}
.colors-section{margin-top:65px;background:#f0f2ec;border-block:1px solid #e5e8df}
.colors-inner{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:55px;padding-block:45px}
.colors-copy h2{margin:0;font-size:27px;font-weight:600;letter-spacing:-.055em;line-height:1.6}
.colors-copy p{margin-top:14px;font-size:12px;line-height:1.9;color:var(--muted)}
.level-palette{display:flex;justify-content:space-between;gap:10px;padding:0;margin:0;list-style:none}
.level{flex:1;min-width:0;text-align:center}
.level>span{height:70px;display:flex;align-items:center;justify-content:center;background:var(--wash);border-bottom:3px solid var(--level);border-radius:4px 4px 0 0;color:var(--level);font-size:21px;font-weight:600;letter-spacing:-.035em}
.level>i{display:block;margin:18px auto 10px;width:16px;height:16px;border:1.7px solid var(--level);border-radius:50%}
.level>small{font-size:10px;color:#6b7167}
.site-footer{text-align:center;padding-block:35px 37px}
.site-footer p{font-size:11px;line-height:1.9;letter-spacing:-.015em;color:#7b8079}
.screenshot-dialog{padding:0;max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px);border:1px solid #ced4c8;border-radius:10px;box-shadow:0 20px 100px #0004;background:var(--paper);overflow:auto}
.screenshot-dialog::backdrop{background:#242d29b3;backdrop-filter:blur(5px)}
.screenshot-dialog>img{width:100%;height:auto}
.dialog-toolbar{display:flex;justify-content:flex-end;padding:7px 10px;position:sticky;top:0;background:#fafaf8f5}
.dialog-toolbar button{border:0;background:none;color:var(--ink);font-size:12px;cursor:pointer;padding:7px 9px}
.dialog-toolbar button span{font-size:19px;vertical-align:-1px;margin-left:8px}
@media(max-width:680px){
  .colors-inner{grid-template-columns:1fr;gap:28px;padding-block:34px}
  .colors-copy h2{font-size:23px;line-height:1.55}
  .colors-copy p{margin-top:10px;font-size:11px}
  .level-palette{gap:8px}
  .level>span{height:61px;font-size:20px}
  .level>i{width:14px;height:14px;margin-top:15px}
}
@media(max-width:560px){
  .wrap{width:calc(100% - 40px)}
  .site-header{gap:12px;padding-block:20px}
  .brand img{width:40px;height:40px}
  .brand span{font-size:22px}
  .product-type{font-size:9px}
  .hero{padding-top:30px}
  h1{font-size:clamp(32px,9.2vw,44px);line-height:1.55}
  .marker{text-decoration-thickness:2px;text-underline-offset:6px}
  .hero-description{font-size:12px;margin-top:23px}
  .mobile-break{display:initial}
  .preview{margin-top:32px}
  .screenshot-button{border-radius:8px}
  .image-zoom{bottom:8px;right:8px;width:28px;height:28px}
  .image-zoom svg{width:14px;height:14px}
  .colors-section{margin-top:42px}
  .site-footer{padding-block:25px 28px;max-width:340px}
  .site-footer p{font-size:10px;line-height:1.9}
  .screenshot-dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:8px}
}
@media(max-width:360px){
  .site-header{flex-wrap:wrap;gap:5px}
  .product-type{margin-left:44px;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}