@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,500&display=swap";@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-1Thin.woff2) format("woff2");font-weight:100;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-2ExtraLight.woff2) format("woff2");font-weight:200;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-3Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-4Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-5Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-6SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-7Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-8ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:A2z;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-9Black.woff2) format("woff2");font-weight:900;font-display:swap}@font-face{font-family:cocoartz;src:url(https://blog.howeverina.studio/font/Griun_Cocoartz-Rg.woff2) format("woff2");font-weight:400;font-display:swap;ascent-override:80%;descent-override:20%}@font-face{font-family:cocoartz;src:url(https://blog.howeverina.studio/font/Griun_DarkCocoartz-Rg.woff2) format("woff2");font-weight:700;font-display:swap;ascent-override:80%;descent-override:20%}@font-face{font-family:icon-sns-espace;src:url(../fonts/icon-sns-espace.woff?xhj2at) format("woff"),url(../fonts/icon-sns-espace.svg?xhj2at#icon-sns-espace) format("svg");font-weight:400;font-style:normal;font-display:block}:root{--text-color:#555;--bg-color:#fff;--white:#fff;--theme-color1-light:#dfdfdf;--theme-color1-default:#b2c9d6;--theme-color2-default:#a1cadb;--theme-color3-default:#bddceb;--theme-color4-default:#feee7d;--theme-color5-default:#f2f2f2}*,:after,:before{box-sizing:border-box}*{margin:0}body{line-height:1.8;-webkit-font-smoothing:antialiased;word-wrap:break-word}body,button,input,select,textarea{font-family:A2z}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}:focus{outline:none}canvas,picture,svg,video{display:block;max-width:100%;margin-block:0;margin-inline:auto}a,button{cursor:pointer}a{text-decoration:none;color:var(--theme-color2-default)}a:hover{opacity:.5}img{vertical-align:middle;max-width:100%}dl,ol,p,ul{margin-block:.9rem;margin-inline:auto}nav ul{list-style:none;padding:0}main{hanging-punctuation:allow-end}html{background:var(--bg-color);touch-action:manipulation}body,button,input,select,textarea{font-family:A2z;color:var(--text-color)}body:after{content:"";position:fixed;top:45px;left:45px;display:block;width:calc(100% - 90px);height:calc(100dvh - 90px);border:5px solid var(--theme-color1-default);pointer-events:none;z-index:1}footer,header,main{width:calc(100% - 300px);margin:auto}footer,header{text-align:center}header{position:fixed;top:-115px;margin-top:115px;left:150px;padding-top:18px;height:115px;z-index:90;transition:transform .3s,top .3s,width .3s,left .3s}header.scroll{left:75px;display:flex;justify-content:space-between;align-items:flex-end;width:calc(100% - 150px);margin-top:0;transform:translateY(70px)}main{max-width:650px;min-height:calc(100vh - 349px);margin-top:94px}main>:first-child{margin-block-start:0}main.content-full{max-width:none}main.content-medium{max-width:720px}footer{position:relative;width:calc(100% - 300px);min-height:105px;margin-top:150px;padding:15px;background:var(--theme-color1-default);z-index:2}footer,footer a{color:var(--bg-color)}h1{font-size:3rem;margin:0;font-family:A2z}h1,h1 a{color:var(--theme-color1-default)}h1 a{font-style:italic}.menu{margin-top:25px}.menu ul{display:flex;justify-content:space-around;margin:0;padding:0;list-style:none;font-size:1.2rem}.menu ul li{min-width:100px}.menu ul li a{display:block;padding:10px;background:var(--theme-color1-default);color:var(--bg-color)}.menu ul li a.router-link-active,.menu ul li a:hover{background:var(--theme-color1-light)}.menu ul li a:hover{opacity:1}.menu-toggler{display:none}.fixed-menu{position:fixed;bottom:50px;right:50px;z-index:91}.fixed-menu ul{margin:0}.fixed-menu button{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;margin:0;padding:0;background:var(--theme-color1-default);border:0;color:var(--bg-color);border-radius:0}.fixed-menu button:before{font:900 16px/1 Font Awesome\ 5 Free;content:""}h2,h3{text-align:center}h2{display:flex;flex-direction:column;align-items:center;margin-block:150px 100px;margin-inline:auto;padding-block-start:150px;padding-inline-end:10px;font-size:2.2rem;color:var(--theme-color1-default);letter-spacing:5px}main>h2:first-child{margin-block-start:0;padding-block-start:0}h2:after,h2:before{content:"";inline-size:150px;block-size:3px;background:var(--theme-color1-default);transform:rotate(-5deg)}h2:before{margin-block-end:30px}h2:after{margin-block-start:30px}h3{position:relative;margin-block:100px 85px;margin-inline:auto;padding-inline-end:5px;color:var(--theme-color1-default);font-size:1.6rem;letter-spacing:5px;z-index:1}h3:before{content:"";position:absolute;width:80px;height:80px;background:var(--theme-color5-default);display:block;top:calc(50% - 40px);left:calc(50% - 40px);z-index:-1;border-radius:50% 70% 50% 80%}h4{font-size:1.6rem;color:var(--theme-color1-default);margin-block:70px 30px;margin-inline:auto;border-block-end:3px solid var(--theme-color5-default)}.post-header{padding-block-start:170px;margin-block-end:60px}.post-header-banner{position:relative;aspect-ratio:3/1;overflow:hidden;background:var(--theme-color5-default);border-radius:10px}.post-header-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.post-header-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8))}.post-header-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:20px 28px;text-align:left}.post-header-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}.post-header-tags li{padding:3px 12px;background:#ffffff38;border-radius:999px;color:var(--white);font-size:.75rem;letter-spacing:1px}.post-header-tags li.primary{background:var(--theme-color2-default);font-weight:700}.post-header-text h2{margin:0;padding:0;color:var(--white);text-align:left;font-size:1.8rem;letter-spacing:2px}.post-header-text h2:after,.post-header-text h2:before{content:none}.post-header-text .post-subtitle{margin:0;max-width:none;text-align:left;font-size:1.05rem;font-weight:400;letter-spacing:.5px;color:#ffffffd9}.area.area-icon{margin:15px auto;width:150px;height:150px;overflow:hidden}.area.area-icon,.area.area-icon img{-o-object-fit:cover;object-fit:cover}.area.area-icon img{max-width:100%;min-height:100%}dl.inline{display:flex;flex-wrap:wrap;gap:1.25rem 0}dl.inline dd,dl.inline dt{margin-block-end:0;padding-block-end:1.25rem;border-block-end:1px solid var(--theme-color5-default)}dl.inline dd:last-of-type,dl.inline dt:last-of-type{padding-block-end:0!important;border-block-end:0!important}dl.inline dt{font-weight:700;inline-size:200px;text-align:end;padding-right:20px}dl.inline dd{inline-size:calc(100% - 200px);padding-inline-start:0}.box{padding:20px;border:1px solid var(--theme-color1-default)}.box>:first-child{margin-block-start:0}.box>:last-child{margin-block-end:0}b,em,strong{font-weight:700}em{font-style:normal;background:linear-gradient(transparent 50%,var(--theme-color4-default) 50%)}strong{background:var(--theme-color4-default)}hr{inline-size:50%;block-size:3px;margin-block:100px;margin-inline:auto;border:0;background:var(--theme-color1-default)}.text-center{text-align:center}.text-small{font-size:smaller}.tag-filter-group{display:flex;flex-direction:column;margin-block:0 60px}.tag-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;margin:5px;list-style:none}.tag-filter button{padding:6px 16px;background:var(--theme-color5-default);border:1px solid var(--theme-color5-default);border-radius:999px;color:var(--text-color);font-family:A2z;font-size:.95rem;letter-spacing:1px}.tag-filter button:hover{border-color:var(--theme-color1-default)}.tag-filter button.primary{border-color:var(--theme-color2-default);color:var(--theme-color2-default);font-weight:700}.tag-filter button.active{background:var(--theme-color1-default);border-color:var(--theme-color1-default);color:var(--bg-color)}.item-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin-block:10px}.item-tags li{padding:3px 12px;background:var(--theme-color5-default);border-radius:999px;color:var(--text-color);font-size:.8rem;letter-spacing:1px}.item-tags li.primary{background:var(--theme-color2-default);color:var(--bg-color);font-weight:700}.thumbnail-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--theme-color5-default);color:var(--theme-color1-default);font-size:2rem;letter-spacing:6px}.hero-image{aspect-ratio:16/9;overflow:hidden;margin-block-end:40px}.hero-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sample-layout{display:flex;align-items:flex-start;gap:40px}.sample-player-pane{position:sticky;top:22vh;flex:0 0 260px;min-width:0}.sample-content-pane{flex:1 1 auto;min-width:0}.art-bg{position:absolute;inset:-10%;width:120%;height:120%;background-position:50%;background-size:cover;filter:blur(16px) brightness(.9)}.art-fg{position:absolute;inset:0;-o-object-fit:contain;object-fit:contain}.art-cover,.art-fg{width:100%;height:100%}.art-cover{-o-object-fit:cover;object-fit:cover}.sample-illustration-hero{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;margin-block-end:30px;background:var(--theme-color5-default);box-shadow:0 10px 24px -14px #0006}.sample-player{padding:16px;background:var(--bg-color);border:1px solid var(--theme-color5-default);border-radius:16px;box-shadow:0 12px 30px -18px #00000059}.sample-player-art{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--theme-color5-default);border-radius:10px;box-shadow:0 8px 20px -10px #0006}.yt-wrapper{position:absolute;inset:0;overflow:hidden}.yt-wrapper iframe{position:absolute;top:50%;left:50%;width:178%;height:178%;border:0;transform:translate(-50%,-50%)}.sample-player-meta{margin-block-start:16px}.sample-player-type{display:block;margin-block-end:4px;font-size:.7rem;letter-spacing:2px;color:var(--theme-color1-default);text-transform:uppercase}.sample-player-title-wrap{overflow:hidden}.sample-player-title-track{display:inline-flex;white-space:nowrap}.sample-player-title-track.marquee{animation:sample-player-marquee var(--marquee-duration,10s) linear infinite}.sample-player-title-track.marquee:hover{animation-play-state:paused}.sample-player-title{margin:0;padding-inline-end:40px;font-size:1rem;font-weight:700;letter-spacing:.5px;color:var(--text-color);white-space:nowrap}@keyframes sample-player-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.sample-player-bar{margin-block-start:16px}.sample-player-bar.disabled{opacity:.4}.sample-player-seek-wrap{position:relative;display:flex;align-items:center;height:16px}.sample-player-seek-track{position:absolute;inset-inline:0;height:4px;border-radius:2px;overflow:hidden;background:var(--theme-color5-default)}.sample-player-seek-fill{height:100%;background:var(--theme-color1-default)}.sample-player-seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.sample-player-time{display:flex;justify-content:space-between;margin-block-start:2px;font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--theme-color1-default)}.sample-player-controls{gap:14px;margin-block-start:12px}.sample-player-controls,.sample-player-mode-toggle{display:flex;align-items:center;justify-content:center}.sample-player-mode-toggle{position:relative;width:32px;height:32px;padding:0;background:var(--theme-color5-default);border:0;border-radius:50%;color:var(--text-color);opacity:.8}.sample-player-mode-toggle svg{width:16px;height:16px}.sample-player-mode-toggle:hover{opacity:1}.sample-player-mode-toggle.active{background:var(--theme-color1-default);color:var(--bg-color);opacity:1}.sample-player-mode-badge{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:var(--bg-color);color:var(--theme-color1-default);font-size:.6rem;font-weight:700;line-height:1}.sample-player-mode-badge,.sample-player-toggle{display:flex;align-items:center;justify-content:center}.sample-player-toggle{width:48px;height:48px;padding:0;background:#1a1a1a;border:0;border-radius:50%;color:#fff}.sample-player-toggle svg{width:18px;height:18px}.sample-player-toggle:not(:disabled):hover{background:#333;opacity:1}.sample-player-toggle:disabled{opacity:.4;cursor:not-allowed}.sample-player-audio-el{display:none}.sample-list{display:flex;flex-direction:column;padding:0;list-style:none}.sample-row{display:flex;align-items:center;gap:14px;padding:8px 10px;border-radius:8px;transition:background-color .15s}.sample-row:hover{background:var(--theme-color5-default)}.sample-row.active .sample-title{color:var(--theme-color2-default)}.sample-index{flex:0 0 20px;text-align:center;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--theme-color1-default)}.now-playing-eq{display:inline-flex;align-items:flex-end;justify-content:center;gap:2px;height:14px}.now-playing-eq i{width:3px;background:var(--theme-color2-default);border-radius:1px;animation:eq-bounce .9s ease-in-out infinite}.now-playing-eq i:first-child{animation-delay:-.6s}.now-playing-eq i:nth-child(2){animation-delay:-.3s}@keyframes eq-bounce{0%,to{height:3px}50%{height:14px}}.sample-art{position:relative;flex:0 0 52px;width:52px;height:52px;overflow:hidden;background:var(--theme-color5-default);border:0;border-radius:6px;padding:0}.sample-art .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:auto;width:26px;height:26px;background:#ffffffd9;border-radius:50%;color:var(--theme-color1-default);opacity:0;transition:opacity .2s}.sample-art .play-badge svg{width:12px;height:12px}.sample-art:focus-visible .play-badge,.sample-row.active .sample-art .play-badge,.sample-row:hover .sample-art .play-badge{opacity:1}.sample-body{flex:1 1 auto;min-width:0}.sample-title{display:block;font-size:.95rem;font-weight:700}.sample-comment,.sample-title{color:var(--text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sample-comment{margin:2px 0 0;font-size:.8rem;opacity:.75}.sample-tags-line{display:flex;margin:2px 0 0;font-size:.72rem;letter-spacing:.5px;color:var(--theme-color1-default);overflow:hidden;white-space:nowrap}.sample-tags-line span{overflow:hidden;text-overflow:ellipsis}.sample-tags-line span:not(:last-child):after{content:"·";margin-inline:4px}.sample-tags-line span.primary{color:var(--theme-color2-default);font-weight:700}.sample-kind-icon{flex:0 0 auto;font-size:.85rem;color:var(--theme-color1-default);opacity:.6}.content-list{display:flex;flex-direction:column;gap:20px;padding:0;list-style:none}.content-list>li{display:flex;align-items:center;gap:28px;padding:16px;border-radius:14px;transition:background-color .15s}.content-list figure,.content-list>li:hover{background:var(--theme-color5-default)}.content-list figure{flex:0 0 240px;aspect-ratio:4/3;overflow:hidden;margin:0;border-radius:12px;box-shadow:0 10px 24px -14px #0006}.content-list .thumbnail-fallback,.content-list img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;max-width:none}.content-list .body{flex:1 1 auto}.content-list .title{display:block;margin-block-end:10px;font-size:1.4rem;color:var(--text-color);letter-spacing:1px;font-weight:700}.content-list a.title:hover{opacity:.6}.content-list .subtitle{margin:0;font-size:1rem}.content-list .date{display:block;margin-block-start:10px;font-size:.8rem}.content-list .date,.empty-state{color:var(--theme-color1-default)}.empty-state{padding-block:60px;text-align:center}@media only screen and (max-width:1024px){body,button,input,textarea{line-height:1.6}header.scroll{transform:none}body:after{top:20px;left:20px;width:calc(100% - 40px);height:calc(100dvh - 40px);z-index:92}header{width:calc(100% - 100px);z-index:90}main{width:calc(100% - 90px)}footer{width:50%;margin-left:0}.menu,.menu-toggler{position:fixed;transition:all .3s}.menu{display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;margin:0;background:var(--bg-color);opacity:0;transform:scale(0);pointer-events:none}.menu ul{display:block;flex-direction:column;width:calc(100% - 150px)}.menu.open{opacity:1;transform:scale(1);pointer-events:auto}.menu-toggler{top:25px;right:25px;display:block;width:40px;height:40px;background:var(--theme-color1-default);border:0;z-index:93}.menu-toggler:after,.menu-toggler:before{content:"";position:absolute;left:14px;top:18px;width:16px;height:3px;background:var(--bg-color);border-radius:2px}.menu-toggler.open:before{transform:rotate(-45deg)}.menu-toggler.open:after{transform:rotate(45deg)}.fixed-menu{bottom:25px;right:25px}h1{position:fixed;top:-2px;left:0;width:100%;font-size:3rem;z-index:92;text-align:center}h2{margin-block:100px;padding-block-start:100px;font-size:2rem}.post-header-banner{aspect-ratio:4/3}.post-header-text{padding:16px 20px}.post-header-text h2{font-size:1.5rem}.post-header-text .post-subtitle{font-size:1rem}dl.inline dd,dl.inline dt{inline-size:100%;text-align:start}dl.inline dt{padding-block-end:0;border-block-end:0}dl.inline dd{padding-inline-start:0;margin-block-end:1.25rem}.sample-layout{flex-direction:column;align-items:stretch}.sample-player-pane{position:static;flex-basis:auto;width:100%;max-width:320px;margin-inline:auto}.sample-index{display:none}.content-list>li{flex-direction:column;align-items:stretch;gap:20px}.content-list figure{flex-basis:auto}}