:root{--ink:#1e1e22;--body:#3e3d48;--soft:#736f84;--faint:#9a97ac;--line:#e2e2eb;--blue:#088fd7;--bg:#fff;--surface:#f8f8fc;--dark:#0c0c12}@media (prefers-color-scheme:dark){:root{--ink:#f0eff4;--body:#c9c7d4;--soft:#918ea2;--faint:#6f6c7e;--line:#26262f;--blue:#4db2ec;--bg:#0c0c12;--surface:#15151c}}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--body);letter-spacing:-.36px;word-break:keep-all;-webkit-font-smoothing:antialiased;font-family:Pretendard,-apple-system,sans-serif;font-size:18px;line-height:1.8}.col{max-width:680px;margin:0 auto;padding:0 24px}.col-wide{max-width:920px;margin:0 auto;padding:0 24px}a{color:var(--blue);text-decoration:none}a:hover{text-underline-offset:4px;text-decoration:underline}header.site{padding:26px 0}header.site .bar{justify-content:space-between;align-items:center;max-width:1440px;margin:0 auto;padding:0 32px;display:flex}.logo{--fill-0:var(--body);display:block}.logo svg path,footer.site .brand svg path{stroke:var(--fill-0);stroke-width:.55px;stroke-linejoin:round;stroke-linecap:round}.logo svg{width:auto;height:30px;display:block;overflow:visible}.logo:hover{opacity:.7}nav.main{align-items:center;gap:22px;display:flex}nav.main a{color:var(--soft);font-size:15px;font-weight:600}nav.main a:hover{color:var(--blue);text-decoration:none}nav.main a.on{color:var(--ink)}.hero{padding:88px 0 40px}.hero h1{letter-spacing:-1.2px;color:var(--ink);font-size:38px;font-weight:700;line-height:1.35}.hero p{color:var(--body);margin-top:20px;font-size:19px}.page-icon{border:1px solid var(--line);border-radius:24px;width:120px;height:120px;margin-bottom:28px;display:block;box-shadow:0 4px 14px #1414281a}.callout{background:var(--surface);border:1px solid var(--line);border-radius:14px;align-items:flex-start;gap:14px;margin-top:36px;padding:19px 24px 21px;display:flex}.callout .emoji{align-items:center;height:29px;font-size:21px;line-height:1;display:flex}.callout .body p{margin:0;font-size:16px;line-height:1.8}.callout .body p+p{margin-top:4px}.callout .stores{flex-direction:column;gap:8px;margin-top:14px;display:flex}.callout .stores a{color:var(--body);flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:15px;display:flex}.callout .stores a:hover{text-decoration:none}.callout .stores a b{color:var(--ink);white-space:nowrap}.callout .stores a:hover b{color:var(--blue)}.callout .stores .sub{color:var(--soft);white-space:nowrap;font-size:14px}.callout .stores .store-ic{border-radius:4px;flex:none}section{padding:72px 0}.band{background:var(--surface)}.eyebrow{letter-spacing:-.2px;color:var(--faint);margin-bottom:14px;font-size:15px;font-weight:600}h2{letter-spacing:-.7px;color:var(--ink);margin-bottom:24px;font-size:24px;font-weight:700;line-height:1.5}p+p{margin-top:20px}p b,li b{color:var(--ink);font-weight:700}.muted{color:var(--faint);font-size:15px}.gallery{grid-template-columns:1fr 1fr;gap:36px 28px;max-width:920px;margin:0 auto;padding:0 24px;display:grid}.card{color:inherit;display:block}.card:hover{text-decoration:none}.card .thumb{aspect-ratio:2;border:1px solid var(--line);background:var(--surface);border-radius:14px;overflow:hidden}.card .thumb img{object-fit:cover;width:100%;height:100%;transition:transform .35s;display:block}.card:hover .thumb img{transform:scale(1.025)}.card .thumb.text{background:var(--dark);border:0;justify-content:center;align-items:center;padding:24px;display:flex}.card .thumb.text span{letter-spacing:-.5px;color:#f5f5f8;text-align:center;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:19px;font-weight:700;line-height:1.6;display:-webkit-box;overflow:hidden}.card .t{letter-spacing:-.5px;color:var(--ink);margin-top:14px;font-size:18px;font-weight:700;line-height:1.5}.card:hover .t{color:var(--blue)}.card .meta{letter-spacing:-.2px;color:var(--faint);flex-wrap:wrap;align-items:center;gap:8px;margin-top:7px;font-size:14px;font-weight:500;display:flex}.chip{letter-spacing:-.2px;background:var(--chip-bg,#e3e2e0);color:var(--chip-fg,#32302c);border-radius:5px;padding:4px 8px;font-size:12.5px;font-weight:500;line-height:1;display:inline-block}a.chip:hover{filter:brightness(.96);text-decoration:none}.chip[data-tag=유월]{--chip-bg:#dbeddb;--chip-fg:#1c3829}.chip[data-tag=유월의\ 시현이]{--chip-bg:#eee0da;--chip-fg:#442a1e}.chip[data-tag="프로젝트: 디토"]{--chip-bg:#d3e5ef;--chip-fg:#24456b}.chip[data-tag=Ditto\;verse]{--chip-bg:#e8deee;--chip-fg:#492f64}.chip[data-tag=채용]{--chip-bg:#e3e2e0;--chip-fg:#32302c}@media (prefers-color-scheme:dark){.chip{--chip-bg:#2f2f36;--chip-fg:#c6c4d2}.chip[data-tag=유월]{--chip-bg:#1e352a;--chip-fg:#a8d5b5}.chip[data-tag=유월의\ 시현이]{--chip-bg:#3a2e28;--chip-fg:#d5b3a3}.chip[data-tag="프로젝트: 디토"]{--chip-bg:#1f3346;--chip-fg:#9ec8e8}.chip[data-tag=Ditto\;verse]{--chip-bg:#322843;--chip-fg:#c5aee0}.chip[data-tag=채용]{--chip-bg:#2f2f36;--chip-fg:#c6c4d2}a.chip:hover{filter:brightness(1.15)}.page-icon{box-shadow:none}.card .thumb.text{background:var(--surface);border:1px solid var(--line)}.card .thumb img{opacity:.94}}.more{max-width:920px;margin:44px auto 0;padding:0 24px;font-size:16px;font-weight:600}.tagbar{flex-wrap:wrap;gap:8px;margin:28px 0 8px;display:flex}.tagbar a{letter-spacing:-.2px;color:var(--soft);border:1px solid var(--line);border-radius:100px;padding:5px 14px;font-size:14px;font-weight:600}.tagbar a:hover{color:var(--blue);border-color:var(--blue);text-decoration:none}.tagbar a.on{color:#fff;background:var(--ink);border-color:var(--ink)}.postrows{flex-direction:column;margin:20px 0 8px;display:flex}.postrow{border-top:1px solid var(--line);color:inherit;flex-direction:column;gap:5px;padding:20px 0;display:flex}.postrow:last-child{border-bottom:1px solid var(--line)}.postrow .t{letter-spacing:-.5px;color:var(--ink);font-size:18px;font-weight:700;line-height:1.5}.postrow .meta{letter-spacing:-.2px;color:var(--soft);flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}a.postrow:hover{text-decoration:none}a.postrow:hover .t{color:var(--blue)}.draft-badge{letter-spacing:.4px;color:#fff;background:var(--faint);vertical-align:2px;border-radius:5px;margin-left:8px;padding:2px 7px;font-size:11px;font-weight:700}.post-hero{padding:72px 0 0}.post-hero .crumb{color:var(--faint);margin-bottom:20px;font-size:15px;font-weight:600}.post-hero .crumb a{color:var(--faint)}.post-hero .crumb a:hover{color:var(--blue)}.post-hero h1{letter-spacing:-1.1px;color:var(--ink);font-size:34px;font-weight:700;line-height:1.45}.post-hero .meta{color:var(--faint);flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font-size:15px;font-weight:500;display:flex}.post-cover{max-width:920px;margin:40px auto 0;padding:0 24px}.post-cover img{border:1px solid var(--line);border-radius:14px;width:100%;height:auto;display:block}.prose{padding:48px 24px 96px;font-size:17px}.prose>:first-child{margin-top:0}.prose h1,.prose h2{letter-spacing:-.7px;color:var(--ink);margin:48px 0 16px;font-size:24px;font-weight:700;line-height:1.5}.prose h3{letter-spacing:-.5px;color:var(--ink);margin:36px 0 12px;font-size:19px;font-weight:700;line-height:1.5}.prose h4{color:var(--ink);margin:28px 0 10px;font-size:17px;font-weight:700}.prose p{margin:18px 0}.prose ul,.prose ol{flex-direction:column;gap:7px;margin:18px 0;padding-left:26px;display:flex}.prose li>ul,.prose li>ol{margin:7px 0 0}.prose li p{margin:0}.prose li p+p{margin-top:7px}.prose blockquote{border-left:3px solid var(--ink);margin:26px 0;padding-left:22px}.prose blockquote p{color:var(--body);margin:0}.prose blockquote p+p{margin-top:12px}.prose hr{border:0;border-top:1px solid var(--line);margin:44px 0}.prose img{border-radius:12px;max-width:100%;height:auto;margin:28px auto;display:block}.prose p:has(>img+img){grid-template-columns:1fr 1fr;gap:14px;margin:28px 0;display:grid}.prose p:has(>img+img) img{width:100%;margin:0}.prose img[alt$="(모바일 화면)"]{border:1px solid var(--line);max-width:min(100%,390px)}@media (width<=560px){.prose p:has(>img+img){grid-template-columns:1fr;gap:16px}}.prose code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.86em}.prose pre{letter-spacing:0;border-radius:12px;margin:26px 0;padding:20px 22px;font-size:14px;line-height:1.7;overflow-x:auto}.prose pre code{font-size:inherit;background:0 0;border:0;padding:0}.prose table{border-collapse:collapse;width:100%;margin:26px 0;font-size:15px;line-height:1.6;display:block;overflow-x:auto}.prose th,.prose td{border:1px solid var(--line);text-align:left;vertical-align:top;padding:10px 14px}.prose th{background:var(--surface);color:var(--ink);white-space:nowrap;font-weight:600}.prose details{border:1px solid var(--line);border-radius:12px;margin:22px 0;padding:16px 20px}.prose details summary{color:var(--ink);cursor:pointer;font-weight:600}.prose details[open] summary{margin-bottom:10px}.prose a{word-break:break-all}.prose input[type=checkbox]{accent-color:var(--ink);margin-right:8px}.post-foot{border-top:1px solid var(--line);padding:28px 0 96px;font-size:15px;font-weight:600}footer.site{background:var(--surface);margin-top:0;padding:56px 0 64px}footer.site .col{flex-direction:column;gap:20px;display:flex}footer.site .brand{--fill-0:var(--body)}footer.site .brand svg{width:auto;height:24px;display:block;overflow:visible}footer.site .social{gap:16px;display:flex}footer.site .social a{color:var(--soft);display:flex}footer.site .social a:hover{color:var(--ink)}footer.site a{color:var(--soft)}footer.site .links .sep{color:var(--faint);margin:0 6px}footer.site .desc p{color:var(--soft);letter-spacing:-.2px;margin:0;font-size:14px;line-height:1.9}footer.site .copyright{color:var(--faint);letter-spacing:-.2px;font-size:13px}html.js .fiu-hero{opacity:0;transition:opacity .52s cubic-bezier(.22,.61,.36,1) var(--d,0s), transform .52s cubic-bezier(.22,.61,.36,1) var(--d,0s);transform:translateY(14px)}html.js .fiu{opacity:0;transition:opacity .3s ease-out,transform .3s ease-out;transform:translateY(6px)}html.js .fiu.on,html.js .fiu-hero.on{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){html.js .fiu,html.js .fiu-hero{opacity:1;transition:none;transform:none}}@media (width<=640px){body{font-size:17px}.hero{padding:56px 0 32px}.hero h1{letter-spacing:-.9px;font-size:29px}section{padding:56px 0}header.site .bar{padding:0 20px}.logo svg{height:26px}.callout{padding:20px 22px}.gallery{grid-template-columns:1fr;gap:32px}.post-hero{padding:56px 0 0}.post-hero h1{letter-spacing:-.8px;font-size:26px}.post-cover{margin-top:32px}.prose{padding:36px 24px 72px}.prose h1,.prose h2{font-size:21px}.prose h3{font-size:18px}}