/* 4NINE theme layer on top of Edge (Edge built CSS stays for Diary / Contact / posts) */
:root{
  --n9-bg:#04050a; --n9-text:#f4f6ff; --n9-dim:rgba(226,233,255,.80); --n9-accent:#ff7bfb;
  --n9-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",Roboto,sans-serif;
  --n9-cr:21px; --n9-hv:.5; --n9-cine:.8;
}
html.n9-dark{--color-primary-text:#f4f6ff}
html.n9-light{--color-primary-text:#15171a;--n9-bg:#fff;--n9-text:#15171a;--n9-dim:#6b6f76}
html{background:var(--n9-bg)}
body.n9{font-family:var(--n9-font);color:var(--n9-text);background:var(--n9-bg);-webkit-font-smoothing:antialiased;min-height:100vh}
body.n9 .site{background:transparent}

/* ── background layers ── */
.n9-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--n9-bg);overflow:hidden}
.n9-bg canvas,#n9-still{position:absolute;inset:0;width:100%;height:100%}
#n9-pl{mix-blend-mode:screen}
html:not(.n9-rb) #n9-pl{display:none}
html.n9-rb #n9-gl{display:none}
#n9-still{background:var(--n9-bg) center/cover no-repeat;display:none;transform-origin:62% 42%;will-change:transform;animation:n9kb 90s ease-in-out infinite alternate}
@keyframes n9kb{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.15) translate3d(-2.2%,-1.6%,0)}}
html.n9-fallback .n9-bg canvas{display:none}
html.n9-fallback #n9-still{display:block}
#n9-grain{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
html.n9-fallback #n9-grain,html.n9-nograin #n9-grain{display:none}
@media (prefers-reduced-motion:reduce){#n9-still{animation:none}}

/* ── header / menu ── */
.n9-site{position:relative}   /* z-index를 주지 않음: 스택 컨텍스트가 생기면 헤어라인 screen 블렌드가 그 안에 갇혀 카드의 backdrop-filter(굴절)가 배경을 못 봄 */
.n9-headwrap{position:sticky;top:0;z-index:7;padding:0 4vw;transition:background .25s ease}
.n9-headwrap.stuck{background:rgba(3,6,16,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.n9-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0;position:relative}
.n9-head::before{content:"";position:absolute;left:-60vw;right:-60vw;top:-10px;height:170%;background:linear-gradient(to bottom,rgba(3,5,14,.66),rgba(3,5,14,.30) 55%,rgba(3,5,14,0));z-index:-1;pointer-events:none}
.n9-logo{font-weight:800;letter-spacing:.2em;font-size:18px;color:var(--n9-text);text-decoration:none;text-shadow:0 0 14px rgba(3,6,22,.9),0 1px 3px rgba(0,0,0,.8)}
.n9-logo img{height:34px;width:auto;display:block}
.n9-nav .nav{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.n9-nav a{color:var(--n9-text);text-decoration:none;font-size:15px;letter-spacing:.04em;opacity:.78;text-shadow:0 0 12px rgba(3,6,22,.9),0 1px 3px rgba(0,0,0,.8)}
.n9-nav .nav-current a,.n9-nav a:hover{opacity:1}

/* ── Home header (logo left, buttons right, no menu) ── */
html.n9-dark{--n9-hh:76px;--n9-nh:58px}
.n9-hhead{position:relative;z-index:6;height:var(--n9-hh);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid rgba(255,255,255,.12);background:#000}
.n9-hlogo{display:block;height:42px}
.n9-hlogo img{height:100%;width:auto;display:block}
.n9-hactions{display:flex;gap:10px;align-items:center}
.n9-hbtn{font:inherit;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:none;color:var(--n9-text);font-size:11px;font-weight:700;letter-spacing:.14em;cursor:pointer;transition:border-color .2s,background .2s}
.n9-hbtn:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ── Home first screen ── */
html.n9-dark .n9-home{max-width:none;margin:0;padding:0;display:block}
html.n9-dark .site-content,html.n9-dark .site-main,html.n9-dark .n9-site{margin:0!important;padding:0!important}
html.n9-dark .n9-intro{margin:0}
.n9-intro{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:clamp(24px,5vw,90px);align-items:center;
  padding:min(clamp(36px,7.4vw,118px),13vh) 4vw;background:#000}   /* 높이는 내용 + 줄인 여백. 화면을 꽉 채우지 않아 메뉴 바와 첫 카드의 윗부분이 보임 */
html.n9-intro-shader .n9-intro{background:linear-gradient(to bottom,#000 0,rgba(0,0,0,.94) 40%,rgba(0,0,0,.45) 100%)}
.n9-intro-title{margin:0;color:#fff;font-size:clamp(34px,5.4vw,92px);line-height:1.12;font-weight:700;letter-spacing:-.02em;word-break:keep-all}
.n9-intro-lead{margin:clamp(14px,2vw,28px) 0 0;font-size:clamp(17px,2.1vw,32px);line-height:1.5;font-weight:400;color:rgba(244,246,255,.86);word-break:keep-all;max-width:22em}
.n9-profile{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:420px;justify-self:end}
.n9-avatar{width:168px;height:168px;border-radius:50%;object-fit:cover;display:block;border:1px solid rgba(255,255,255,.2)}
.n9-profile-body{font-size:15px;line-height:1.75;color:rgba(244,246,255,.8)}
.n9-profile-body p{margin:0 0 .8em}
.n9-profile-body p:first-child{color:#fff;font-weight:600}
.n9-profile-body ul{list-style:none;margin:0 0 .8em;padding:0}
.n9-profile-body li{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n9-profile-body a{display:inline-block;margin-top:8px;padding:9px 20px;border:1px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.n9-profile-body a:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media (max-width:860px){.n9-intro{grid-template-columns:1fr;align-content:center}.n9-profile{justify-self:start}}

/* ── Main menu bar: sits under the first screen, then sticks to the top ── */
.n9-mainnav{position:sticky;top:0;z-index:7;height:var(--n9-nh);display:flex;align-items:center;justify-content:center;padding:0 4vw;
  background:rgba(0,0,0,.0);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);transition:background .25s ease,backdrop-filter .25s ease}
.n9-mainnav.stuck{background:rgba(3,6,16,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.n9-intro-shader .n9-mainnav{background:rgba(0,0,0,.35)}
.n9-mainnav .nav{display:flex;gap:clamp(20px,4vw,52px);list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.n9-mainnav a{color:var(--n9-text);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.72;text-shadow:0 0 12px rgba(3,6,22,.9)}
.n9-mainnav .nav-current a,.n9-mainnav a:hover{opacity:1}

/* ── Home: cinematic cards (below the menu bar, over the aura-flow background) ── */
.n9-works{position:relative;max-width:720px;margin:0 auto;padding:clamp(20px,3vh,36px) 22px 112px;display:flex;flex-direction:column;gap:56px}   /* 아래 여백 112px = 마지막 카드↔버튼 간격(gap 56 + 버튼 위 56)과 같게: 버튼↔Our Clients 띠 */
.n9-home-legacy{}
.n9-card{position:relative;display:flex;flex-direction:column;gap:20px;padding:28px 28px 26px;border-radius:var(--n9-cr);color:inherit;text-decoration:none;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.01) 45%),rgba(8,12,36,.52);
  box-shadow:0 24px 56px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
html.n9-rg .n9-card{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 24px 56px rgba(0,0,0,.28)}
html.n9-fallback .n9-card,html.n9-lite .n9-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,13,42,.72);box-shadow:none}
.n9-cw{position:relative}
/* 카드 헤어라인: 카드 바깥(형제)에 두어 배경과 screen 블렌드가 되게 함. 좌상단·우하단에서만, 양쪽 변을 따라 사라짐 (reference-hairline.png) */
.n9-hl{position:absolute;inset:0;padding:var(--n9-hl-w,1.5px);border-radius:var(--n9-cr);pointer-events:none;z-index:1;
  mix-blend-mode:var(--n9-hl-bm,screen);opacity:var(--n9-hl-op,.5);
  background:radial-gradient(ellipse var(--n9-hl-len,200px) calc(var(--n9-hl-len,200px)*1.4) at 0 0,rgba(255,255,255,var(--n9-hl-a,1)) 0,rgba(255,255,255,0) 100%),
             radial-gradient(ellipse var(--n9-hl-len,200px) calc(var(--n9-hl-len,200px)*1.4) at 100% 100%,rgba(255,255,255,var(--n9-hl-a,1)) 0,rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.n9-title{font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.3;letter-spacing:-.005em;word-break:keep-all;text-shadow:0 0 14px rgba(4,8,26,.85),0 1px 3px rgba(0,0,0,.6)}
.n9-bar{position:relative;aspect-ratio:16 / 9;width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.3);background:#070b1c;transition:border-color .6s ease}
.n9-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1.4s cubic-bezier(.16,.7,.2,1)}
/* Edge 기본 a:hover{opacity:.8} 때문에 카드·타일 전체가 반투명해져 흐려 보였음 → 이 요소들만 불투명 유지 */
a.n9-card:hover,a.n9-tile:hover,a.n9-allworks:hover,a.n9-hlogo:hover,a.n9-llogo:hover,a.n9-logo:hover{opacity:1}
.n9-nothumb{background:linear-gradient(160deg,#101a3a,#070b1c)}
html:not(.n9-nohover) .n9-card:hover .n9-bar{border-color:rgba(255,255,255,.55)}
html:not(.n9-nohover) .n9-card:hover .n9-thumb{transform:scale(calc(1 + var(--n9-hv)*.16)) translate(calc(var(--n9-hv)*-2.2%),calc(var(--n9-hv)*-1.6%))}
.n9-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.n9-meta{min-width:0;flex:1;font-size:12.5px;letter-spacing:.06em;color:var(--n9-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 10px rgba(4,8,26,.9),0 1px 2px rgba(0,0,0,.7)}
.n9-meta .k{opacity:.62}.n9-meta .v{color:var(--n9-text)}.n9-meta .sep{margin:0 .75em;opacity:.35}
.n9-view{flex:none;border:1px solid rgba(255,255,255,.72);border-radius:999px;padding:8px 22px;font-size:12px;font-weight:700;letter-spacing:.14em;transition:background .25s,border-color .25s}
html:not(.n9-nohover) .n9-card:hover .n9-view{background:rgba(255,255,255,.14);border-color:#fff}
.n9-card:focus-visible{outline:2px solid var(--n9-accent);outline-offset:3px}
/* Glass Surface (React Bits 원본 CSS의 dark 분기). 전체 테두리를 두르는 흰 inset 선은 헤어라인(좌상단·우하단)으로 대체 */
html.n9-dark{color-scheme:dark}
.n9-card .gs-filter{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:-1}
.n9-card.gs-svg{background:hsl(0 0% 0% / var(--glass-frost,0));
  -webkit-backdrop-filter:var(--filter-id,url(#glass-filter)) saturate(var(--glass-saturation,1));backdrop-filter:var(--filter-id,url(#glass-filter)) saturate(var(--glass-saturation,1));
  box-shadow:0 4px 16px rgba(17,17,26,.05),0 8px 24px rgba(17,17,26,.05),0 16px 56px rgba(17,17,26,.05),0 4px 16px rgba(17,17,26,.05) inset,0 8px 24px rgba(17,17,26,.05) inset,0 16px 56px rgba(17,17,26,.05) inset}
.n9-card.gs-fallback{background:hsl(0 0% 100% / calc(0.04 + var(--glass-frost,0) * 0.3));
  -webkit-backdrop-filter:blur(12px) saturate(calc(var(--glass-saturation,1) * 1.4)) brightness(1.04);backdrop-filter:blur(12px) saturate(calc(var(--glass-saturation,1) * 1.4)) brightness(1.04);
  box-shadow:0px 4px 16px rgba(17,17,26,.06),0px 8px 24px rgba(17,17,26,.06),0px 16px 56px rgba(17,17,26,.06)}
.n9-card.gs-off{-webkit-backdrop-filter:none;backdrop-filter:none;background:hsl(0 0% 0% / var(--glass-frost,0))}
.n9-card .gs-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,hsl(0 0% 100% / .14) 0%,transparent 42%,transparent 64%,hsl(0 0% 100% / .05) 100%)}
.n9-allworks{display:block;width:max-content;margin:56px auto 0;padding:14px 28px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:var(--n9-text);text-decoration:none;
  letter-spacing:.2em;font-size:13px;font-weight:700;text-align:center;background:rgba(255,255,255,.05);text-shadow:0 0 12px rgba(3,6,22,.9)}
.n9-allworks span{display:block;font-weight:400;letter-spacing:.06em;font-size:12px;color:var(--n9-dim);margin-top:4px}
.n9-allworks:hover{background:rgba(255,63,249,.20);border-color:#fff}
/* 메뉴 막대와 첫 카드 사이 구간 제목(확정 b안): 빈 공간 안에 절대 위치로 놓아 카드 스냅 위치를 밀지 않음 */
.n9-wtitle{position:absolute;left:0;right:0;top:0;height:var(--n9-wt-space,0);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;margin:0}
.n9-wtitle.wt-off{display:none}   /* 빈 공간이 72px 미만인 아주 낮은 화면의 안전장치 */
.n9-wtitle h2{margin:0;font-family:"Titillium Web","Noto Sans KR",sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,64px);line-height:1.055;letter-spacing:-.049em;color:#fff}
.n9-wtitle p{margin:clamp(6px,.7vw,12px) 0 0;font-family:"Noto Sans KR","Apple SD Gothic Neo",-apple-system,sans-serif;font-size:13px;font-weight:400;letter-spacing:-.02em;color:rgba(244,246,255,.86)}
.n9-sf{margin-top:70px;background:#000;color:#fff;font-size:12.5px;line-height:1.95;scroll-snap-align:end;position:relative;z-index:1}
html.n9-light .n9-sf{margin-top:0}
.n9-sf-in{max-width:1080px;margin:0 auto;padding:46px clamp(16px,4vw,40px) 50px;display:flex;justify-content:space-between;gap:28px 56px;flex-wrap:wrap}
.n9-sf-info p{margin:0}
.n9-sf-name{font-weight:700;letter-spacing:.02em}
.n9-sf-copy{margin-top:12px!important;font-size:12px;color:rgba(255,255,255,.72)}
.n9-sf-nav{display:flex;gap:clamp(24px,5vw,72px)}
.n9-sf-menu,.n9-sf-legal{display:flex;flex-direction:column;gap:2px}
.n9-sf a{color:#fff;text-decoration:none}.n9-sf a:hover{text-decoration:underline}
.n9-sf-legal a:last-child{font-weight:700}
@media (max-width:640px){.n9-sf-in{flex-direction:column}.n9-sf-nav{gap:36px}}
.n9-empty{text-align:center;padding:80px 0;color:var(--n9-dim)}
/* ── Home scroll snap (CSS 표준) ── */
.n9-card{scroll-snap-align:center;scroll-snap-stop:always}
.n9-allworks{scroll-snap-align:none}   /* 버튼은 가운데 멈춤 대상이 아님: 마지막 카드 다음엔 버튼+로고 띠+footer가 화면 아래에 맞춰 멈춤(footer end 스냅) */
html.n9-snap-active{scroll-snap-type:y mandatory}
@media (max-height:700px),(max-width:539px){
  html.n9-snap-active{scroll-snap-type:none}
  .n9-card,.n9-allworks{scroll-snap-align:none;scroll-snap-stop:normal}
}

/* ── Portfolio: full-bleed 3-column grid, no glass ── */
.n9-search{display:flex;align-items:center;gap:8px;width:min(340px,86vw);border-bottom:1px solid rgba(255,255,255,.6);padding:4px 8px;color:var(--n9-text);background:rgba(3,6,16,.5)}
.n9-search input{flex:1;min-width:0;font:inherit;font-size:14px;color:var(--n9-text);background:none;border:0;outline:0;padding:6px 0}
.n9-search input::placeholder{color:var(--n9-dim);opacity:.75}
/* Sodo search is a full-screen iframe. Keep the 70% black layer in the parent document so the live homepage remains visible beneath it. */
#sodo-search-root{--n9-search-in:.8s;--n9-search-out:.8s}
#sodo-search-root .gh-root-frame{background-color:rgba(0,0,0,0)}
#sodo-search-root.n9-search-ready .gh-root-frame{background-color:rgba(0,0,0,.70);animation:n9-ov-in var(--n9-search-in) cubic-bezier(.22,1,.36,1) both}
#sodo-search-root.n9-search-closing .gh-root-frame{background-color:rgba(0,0,0,0);animation:n9-ov-out var(--n9-search-out) cubic-bezier(.22,1,.36,1) both}
@keyframes n9-ov-in{from{background-color:rgba(0,0,0,0)}to{background-color:rgba(0,0,0,.70)}}
@keyframes n9-ov-out{from{background-color:rgba(0,0,0,.70)}to{background-color:rgba(0,0,0,0)}}
@media (prefers-reduced-motion:reduce){#sodo-search-root.n9-search-ready .gh-root-frame,#sodo-search-root.n9-search-closing .gh-root-frame{animation:none}}
#sodo-search-root .gh-root-frame>iframe{background:transparent!important;color-scheme:normal}
.n9-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0}
.n9-tile{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;background:#070b1c;color:#fff;text-decoration:none;content-visibility:auto;contain-intrinsic-size:auto 31.5vw}
.n9-tile[hidden]{display:none}
.n9-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.n9-play{position:absolute;top:14px;right:14px;width:24px;height:24px;background:#000;border-radius:50%;z-index:1}
.n9-play::before{content:"";position:absolute;left:9.5px;top:6.5px;border-style:solid;border-width:5.5px 0 5.5px 8px;border-color:transparent transparent transparent #fff}
.n9-ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px 18px;background:rgba(0,0,0,.34);opacity:0;transition:opacity .2s ease}
html:not(.n9-nohover) .n9-tile:hover .n9-ov,.n9-tile:focus-visible .n9-ov{opacity:1}
.n9-ov-t{font-size:clamp(14px,1.1vw,21px);font-weight:400;line-height:1.4;word-break:keep-all;color:#fff}
.n9-ov-s{font-size:clamp(11px,.85vw,16px);font-weight:400;line-height:1.4;color:#fff}
.n9-tile:focus-visible{outline:2px solid var(--n9-accent);outline-offset:-2px}
@media (max-width:900px){.n9-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .n9-ov{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 62%);justify-content:flex-end;align-items:flex-start;text-align:left;gap:3px;padding:10px 12px}
  .n9-ov-t{font-size:13.5px}.n9-ov-s{font-size:10.5px}}
@media (max-width:480px){.n9-grid{grid-template-columns:1fr}}

/* ── cinema overlay ── */
.n9-cinema{position:fixed;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(0,0,0,var(--n9-cine));
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.n9-cinema.on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.n9-ambient{position:fixed;z-index:0;pointer-events:none;opacity:0;filter:blur(var(--n9-am-blur,70px));
  -webkit-mask-image:radial-gradient(ellipse at center,#000 36%,transparent 74%);mask-image:radial-gradient(ellipse at center,#000 36%,transparent 74%);
  transition:opacity 1s cubic-bezier(.22,1,.36,1)}
.n9-ambient.show{opacity:var(--n9-am-str,.5)}
.n9-ctitle,.n9-cx{position:relative;z-index:2}
.n9-cx{position:absolute}
.n9-stage{z-index:1;position:relative;width:min(1280px,92vw,calc(78vh * 16 / 9));aspect-ratio:16 / 9;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}
.n9-stage video,.n9-stage iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#000}
.n9-stage video{object-fit:contain}
.n9-stage video.n9-wait{cursor:pointer}
/* 재생 버튼: 사이트의 검색 필드와 같은 유리 스타일, 등장은 사이트 모션 규칙(페이드인 + 12px 상승, cubic-bezier(0.22,1,0.36,1)) */
.n9-playbtn{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;padding:0;border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.42);background:linear-gradient(135deg,rgba(42,38,58,.62),rgba(13,14,25,.46));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 16px 54px rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(28px) saturate(1.25);backdrop-filter:blur(28px) saturate(1.25);
  animation:n9-play-in .8s cubic-bezier(.22,1,.36,1) .15s backwards;transition:opacity .3s ease,border-color .25s}
.n9-playbtn::before{content:"";position:absolute;left:50%;top:50%;margin:-14px 0 0 -8px;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff}
.n9-playbtn:hover,.n9-playbtn:focus-visible{border-color:rgba(255,255,255,.85);outline:0}
.n9-playbtn.gone{opacity:0;pointer-events:none}
@keyframes n9-play-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.n9-playbtn{animation:none}}
.n9-nofile{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;color:var(--n9-dim);font-size:13px;letter-spacing:.06em;padding:20px}
.n9-cinema.nov .n9-nofile{display:flex}
.n9-ctitle{font-family:"Noto Sans KR","Apple SD Gothic Neo",-apple-system,sans-serif;font-size:calc(var(--n9-ct-s,15)*1px);font-weight:var(--n9-ct-w,500);letter-spacing:.04em;color:#fff;max-width:min(1280px,92vw);text-align:center}   /* 영상 아래 작품 제목: 흰색·Noto Sans KR·500 (패널 ?vhskdls 에서 굵기·크기 조절) */
.n9-cx{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.n9-cx:hover{border-color:#fff;background:rgba(255,255,255,.12)}
/* 공유 버튼: 닫기(X) 버튼 바로 왼쪽의 같은 44px 원형 + 위쪽 화살표 상자 아이콘(선 1.8). 호버 시 안내, 호버 없는 화면은 "공유하기" 글자 상시 표시 */
.n9-crow{display:flex;align-items:center;justify-content:center;max-width:92vw}
.n9-share{font:inherit;position:absolute;top:18px;right:72px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;flex:none;color:#fff;cursor:pointer;z-index:3;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);transition:border-color .2s,background .2s}
.n9-share:hover,.n9-share:focus-visible{border-color:#fff;background:rgba(255,255,255,.12);outline:0}
.n9-share::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%,-4px);white-space:nowrap;pointer-events:none;opacity:0;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(20,20,30,.86);color:#fff;font-size:12px;letter-spacing:.04em;font-weight:500;
  transition:opacity .2s,transform .2s}
.n9-share:hover::after,.n9-share:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.n9-share-t{display:none;margin-left:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
@media (hover:none),(pointer:coarse){.n9-share{width:auto;padding:0 16px 0 14px;border-radius:999px}.n9-share-t{display:inline}.n9-share::after{display:none}}
.n9-cinema.nov .n9-share{display:none}
.n9-toast{position:absolute;left:50%;bottom:34px;transform:translate(-50%,10px);z-index:4;pointer-events:none;opacity:0;
  padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(20,20,30,.82);color:#fff;font-size:13px;letter-spacing:.04em;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)}
.n9-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.n9-share{right:68px;top:14px}.n9-cx{top:14px;right:14px}}
html.n9-cine-open{overflow:hidden}

/* ── light pages (Portfolio / Contact / Diary / posts): white, like the imweb site, no shader/glass ── */
.n9-lhead{display:flex;flex-direction:column;align-items:center;padding:clamp(40px,7vw,96px) 4vw clamp(18px,3vw,34px);gap:clamp(28px,4vw,52px)}
.n9-llogo{display:block;width:min(460px,72vw)}
.n9-llogo img{display:block;width:100%;height:auto}
.n9-lsearch{display:flex;align-items:center;gap:8px;width:min(320px,86vw);border-bottom:1px solid #c9ccd1;padding:4px 2px;color:#444}
.n9-lsearch input{flex:1;min-width:0;font:inherit;font-size:14px;color:#222;background:none;border:0;outline:0;padding:6px 0}
.n9-lsearch input::placeholder{color:#9a9ea5}
.n9-ghostsearch{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.n9-lnavwrap{position:sticky;top:0;z-index:7;background:#fff;margin-top:0;padding:14px 4vw;border-bottom:1px solid transparent;transition:border-color .2s}
.n9-lnavwrap.stuck{border-bottom-color:#e6e8eb}
.n9-lnav .nav{display:flex;justify-content:center;gap:clamp(20px,4vw,52px);list-style:none;margin:0;padding:0;flex-wrap:wrap}   /* 홈 메뉴(.n9-mainnav)와 같은 간격 */
.n9-lnav a{color:#15171a;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.72}   /* 홈 메뉴와 같은 서체·크기·자간·대문자, 글자색만 어둡게 */
.n9-lnav .nav-current a,.n9-lnav a:hover{opacity:1}
.n9-lnav .nav-current a{color:#7b9d2a}   /* 흰 페이지의 현재 페이지 표시 = 로고의 초록(#7b9d2a) */
.n9-mainnav .nav-current a{color:var(--n9-nav-hi,#b1ea2a)}   /* 홈(어두운 배경)은 별도 색 — ?vhskdls 패널의 '홈 메뉴 하이라이트 색' */
html.n9-light .site-content{padding-top:0}
html.n9-light .n9-grid{margin-top:0}
html.n9-light .n9-empty{color:#8a8e95}
html.n9-light .n9-tile{background:#eef0f2;color:#fff}
html.n9-light .n9-cinema{background:rgba(0,0,0,.92)}
html.n9-light .gh-foot,html.n9-light .gh-head{display:none}
html.n9-light .n9-endmark{display:block}
html.n9-dark .n9-lhead,html.n9-dark .n9-lnavwrap{display:none}

/* ── Edge pages on dark ── */
html.n9-dark body.n9 .gh-article-title,html.n9-dark body.n9 .gh-content,html.n9-dark body.n9 .gh-content p,html.n9-dark body.n9 .gh-content li,html.n9-dark body.n9 .gh-content h1,html.n9-dark body.n9 .gh-content h2,html.n9-dark body.n9 .gh-content h3,
html.n9-dark body.n9 .gh-article-excerpt,html.n9-dark body.n9 .post-caption-title,html.n9-dark body.n9 .post-caption-meta,html.n9-dark body.n9 .post-caption-meta a{color:var(--n9-text)}
html.n9-dark body.n9 .gh-content a{color:var(--n9-accent)}
html.n9-dark body.n9 .gh-content blockquote{border-color:rgba(255,255,255,.3)}
html.n9-dark body.n9 .gh-article-excerpt{opacity:.8}
body.n9 .post-feed,body.n9 .gh-canvas{position:relative;z-index:1}
body.n9 .gh-head{display:none}
body.n9 .n9-endmark{display:block;height:1px;min-height:0;margin:-1px 0 0!important;padding:0!important;border:0;opacity:0;pointer-events:none}   /* Edge의 무한 스크롤(Diary)이 이 요소를 관찰함. 높이를 상쇄(-1px)해 footer 아래에 틈이 생기지 않게 함 */
/* 맥에서 맨 아래를 더 당겨 튕길 때 드러나는 바탕: 위쪽은 흰색, 아래쪽은 footer와 같은 검정 (본문 영역은 body 흰색이 그대로 덮음) */
html.n9-light{background:linear-gradient(to bottom,#fff 0,#fff 50%,#000 50%,#000 100%) fixed}
body.n9 .site-content{min-height:60vh}

/* ── Diary: compact chronological research journal ── */
.n9-diary{width:min(1040px,calc(100% - 48px));margin:0 auto;padding:clamp(48px,7vw,88px) 0 110px;color:#17191c}
.n9-diary-list{display:grid;gap:0}
.n9-diary-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;padding:22px 0;align-items:start;border-bottom:1px solid #dfe1e4}
.n9-diary-card:first-child{border-top:1px solid #dfe1e4}
.n9-diary-card{opacity:0;animation:n9-diary-enter .5s cubic-bezier(.22,.61,.36,1) both}
.n9-diary-card:nth-child(2){animation-delay:.08s}.n9-diary-card:nth-child(3){animation-delay:.16s}
.n9-diary-card:nth-child(4){animation-delay:.24s}.n9-diary-card:nth-child(5){animation-delay:.32s}
.n9-diary-card:nth-child(6){animation-delay:.40s}.n9-diary-card:nth-child(7){animation-delay:.48s}
.n9-diary-card:nth-child(8){animation-delay:.56s}.n9-diary-card:nth-child(9){animation-delay:.64s}
.n9-diary-card:nth-child(10){animation-delay:.72s}.n9-diary-card:nth-child(11){animation-delay:.80s}
.n9-diary-card:nth-child(12){animation-delay:.88s}
@keyframes n9-diary-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.n9-diary-image{display:block;aspect-ratio:4/3;overflow:hidden;background:#eff1f3;color:#8b9096;text-decoration:none}
.n9-diary-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.n9-diary-image:hover img{transform:scale(1.018)}
.n9-diary-placeholder{display:grid;width:100%;height:100%;place-items:center;font-size:12px;letter-spacing:.2em}
.n9-diary-copy{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:24px;align-items:start}
.n9-diary-copy time{grid-column:1;display:block;margin:7px 0 0;font-size:11px;font-weight:600;letter-spacing:.12em;color:#7b8086}
.n9-diary-copy h2{grid-column:2;margin:0 0 8px;font-size:24px;font-weight:500;line-height:1.16;letter-spacing:-.035em;word-break:keep-all}
.n9-diary-copy h2 a,.n9-diary-more{color:inherit;text-decoration:none}
.n9-diary-copy p{grid-column:2;max-width:610px;margin:0 0 12px;font-size:14px;line-height:1.6;color:#676c72;word-break:keep-all}
.n9-diary-more{grid-column:2;display:inline-flex;justify-self:start;gap:10px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.06em;border-bottom:1px solid #17191c;padding-bottom:3px}
.n9-diary .pagination{margin-top:48px}

/* Diary article: narrow reading measure, date first, Edge typography retained. */
body.post-template.tag-diary .content-area{padding-top:clamp(44px,7vw,96px)}
body.post-template.tag-diary .gh-article-header{margin-bottom:clamp(36px,5vw,68px)}
body.post-template.tag-diary .gh-canvas{width:min(760px,calc(100% - 48px));max-width:none;margin-right:auto;margin-left:auto;text-align:left}
body.post-template.tag-diary .n9-diary-article-date{display:block;margin:28px 0 12px;font-size:11px;font-weight:600;letter-spacing:.12em;color:#7b8086}
body.post-template.tag-diary .gh-article-title{font-size:clamp(34px,5vw,58px);letter-spacing:-.035em;word-break:keep-all}
body.post-template.tag-diary .gh-content{font-size:17px;line-height:1.9}

@media (max-width:720px){
  .n9-diary{width:min(100% - 32px,620px);padding:48px 0 80px}
  .n9-diary-card{grid-template-columns:112px minmax(0,1fr);gap:18px}
  .n9-diary-copy{display:block}
  .n9-diary-copy time{margin:1px 0 9px}
  .n9-diary-copy h2{font-size:20px}
  .n9-diary-copy p{display:none}
  body.post-template.tag-diary .content-area{padding-top:36px}
  body.post-template.tag-diary .gh-canvas{width:calc(100% - 32px)}
  body.post-template.tag-diary .gh-content{font-size:16px;line-height:1.82}
}
@media (prefers-reduced-motion:reduce){.n9-diary-card{opacity:1;animation:none}}

/* ===== Diary 어두운 톤 (html.n9-dk): 홈과 같은 글자색, 배경은 정지 사진 한 장(태그 diary 대표 이미지) ===== */
html.n9-dk{--n9-bg:#05060b;--n9-text:#f4f6ff;--n9-dim:rgba(226,233,255,.72);--color-primary-text:#f4f6ff;--color-secondary-text:rgba(226,233,255,.72);color-scheme:dark;background:#05060b}
html.n9-dk body.n9{background:#05060b;color:#f4f6ff}
html.n9-dk .n9-site{position:relative;z-index:1}
.n9-dbg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#14161f 0%,#07080d 60%,#040509 100%)}
.n9-dbg-img{position:absolute;inset:-5%;background-size:cover;background-position:var(--n9-dk-x,50%) var(--n9-dk-y,50%);background-repeat:no-repeat;filter:blur(var(--n9-dk-blur,0px))}
.n9-dbg-shade{position:absolute;inset:0;background:linear-gradient(rgba(3,5,12,var(--n9-dk-dark,.6)),rgba(3,5,12,calc(var(--n9-dk-dark,.6) + .2)))}
html:not(.n9-dk) .n9-dbg{display:none}
html.n9-dk .n9-llogo img{display:none}
html.n9-dk .n9-llogo img.n9-llogo-dark{display:block}
.n9-llogo img.n9-llogo-dark{display:none}
html.n9-dk .n9-lsearch{border-bottom-color:rgba(255,255,255,.35);color:rgba(244,246,255,.8)}
html.n9-dk .n9-lsearch input{color:#f4f6ff}
html.n9-dk .n9-lsearch input::placeholder{color:rgba(226,233,255,.55)}
/* Diary 메뉴 막대: 처음 위치에서는 투명 + 위·아래 헤어라인 1px rgba(255,255,255,.12)(높이 58px는 홈과 동일, 흐림 없음).
   스크롤로 화면 위에 고정되면 막대 영역 뒤로 지나가는 배경·이미지·글자가 흐려지고(backdrop blur) 검정이 함께 페이드인.
   흐림과 검정은 한 레이어(::before)의 opacity 하나로 같은 시간·같은 곡선(cubic-bezier(.22,1,.36,1))으로 들어오고 나감 */
html.n9-dk .n9-lnavwrap{height:58px;padding:0 4vw;display:flex;align-items:center;justify-content:center;background:transparent;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
html.n9-dk .n9-lnavwrap::before{content:"";position:absolute;inset:-1px 0;z-index:-1;pointer-events:none;background:rgba(0,0,0,var(--n9-dk-navA,.7));-webkit-backdrop-filter:blur(var(--n9-dk-navB,16px));backdrop-filter:blur(var(--n9-dk-navB,16px));opacity:0;transition:opacity var(--n9-dk-navT,.6s) cubic-bezier(.22,1,.36,1)}
html.n9-dk .n9-lnavwrap.stuck::before{opacity:1}
@media (prefers-reduced-motion:reduce){html.n9-dk .n9-lnavwrap::before{transition:none}}
html.n9-dk .n9-lnav a{color:#f4f6ff;opacity:.72}
html.n9-dk .n9-lnav a:hover{opacity:1}
html.n9-dk .n9-lnav .nav-current a{color:var(--n9-nav-hi,#b1ea2a);opacity:1}
html.n9-dk .n9-diary{color:#f4f6ff}
html.n9-dk .n9-diary-card,html.n9-dk .n9-diary-card:first-child{border-color:rgba(255,255,255,.16)}
html.n9-dk .n9-diary-image{background:rgba(255,255,255,.06);color:rgba(226,233,255,.55)}
html.n9-dk .n9-diary-copy time,html.n9-dk body.post-template.tag-diary .n9-diary-article-date{color:rgba(226,233,255,.62)}
html.n9-dk .n9-diary-copy p{color:rgba(226,233,255,.78)}
html.n9-dk .n9-diary-more{color:#f4f6ff;border-color:rgba(255,255,255,.4)}
html.n9-dk .n9-diary-copy h2,html.n9-dk .n9-diary-copy h2 a{color:#f4f6ff;text-shadow:0 1px 12px rgba(0,0,0,.55)}
html.n9-dk .n9-diary .pagination,html.n9-dk .n9-diary .pagination a,html.n9-dk .n9-diary .pagination span{color:#f4f6ff}
/* 최근 글 카드 (Bounce Cards 이식) */
.n9-bc{margin:0 0 clamp(18px,3vw,40px)}
.n9-bc-stage{position:relative;width:100%;touch-action:pan-y;-webkit-tap-highlight-color:transparent;--bc-size:200px;height:290px}
.n9-bc-card{position:absolute;top:50%;left:50%;width:var(--bc-size);aspect-ratio:1;overflow:hidden;border:4px solid #fff;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -6px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(0);transition:box-shadow .3s ease;will-change:transform;cursor:pointer;text-decoration:none;color:#fff}
.n9-bc-card[data-active]{box-shadow:0 2px 4px rgba(0,0,0,.14),0 22px 44px -10px rgba(0,0,0,.55)}
.n9-bc-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
.n9-bc-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.n9-bc-ph{display:grid;width:100%;height:100%;place-items:center;font-size:12px;letter-spacing:.2em;color:#8b9096;background:#eff1f3}
.n9-bc-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;text-align:left}
.n9-bc-card[data-active] .n9-bc-cap{opacity:1;transform:none}
.n9-bc-cap time{display:block;font-size:10px;letter-spacing:.12em;opacity:.8}
.n9-bc-cap b{display:block;margin-top:2px;font-size:13px;font-weight:600;line-height:1.3;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){.n9-bc-card{transition:none}}
html.n9-dk body.post-template.tag-diary .gh-article-title{color:#f4f6ff;text-shadow:0 1px 14px rgba(0,0,0,.5)}
html.n9-dk body.post-template.tag-diary .gh-content,html.n9-dk body.post-template.tag-diary .gh-content p,html.n9-dk body.post-template.tag-diary .gh-content li{color:rgba(244,246,255,.92)}
html.n9-dk body.post-template.tag-diary .gh-content h1,html.n9-dk body.post-template.tag-diary .gh-content h2,html.n9-dk body.post-template.tag-diary .gh-content h3,html.n9-dk body.post-template.tag-diary .gh-content h4,html.n9-dk body.post-template.tag-diary .gh-content strong{color:#fff}
html.n9-dk body.post-template.tag-diary .gh-content a{color:var(--n9-nav-hi,#b1ea2a)}
html.n9-dk body.post-template.tag-diary .gh-content blockquote{border-color:rgba(255,255,255,.35);color:rgba(244,246,255,.85)}
html.n9-dk body.post-template.tag-diary .gh-content hr{height:1px;border:0;background-color:rgba(255,255,255,.12)}   /* 메뉴 헤어라인과 같은 색·두께·투명도 */
html.n9-dk body.post-template.tag-diary .gh-content figcaption{color:rgba(226,233,255,.65)}