/* 네온 텍스트 생성기 — 벽 무대 + 예시 띠 → 글자 | 색 | 빛 → 저장·빛 단면 | CSS 코드. 무대는 테마와 상관없이 밤 벽(어두움). */
@font-face{font-family:'Tilt Neon';src:url(fonts/tilt-neon-latin.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Neonderthaw';src:url(fonts/neonderthaw-latin.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.ne-work{container:newk/inline-size;overflow:hidden}

/* 무대: 무늬(--ne-tile, 2배 밀도) 위에 가장자리 어둡게. PNG(paintWall)와 같은 값 */
.ne-stage{position:relative;display:grid;place-items:center;aspect-ratio:16/7;min-height:260px;overflow:hidden;background-color:#231E1B;background-image:radial-gradient(75% 70% at 50% 45%,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 100%),var(--ne-tile,none);background-size:auto,var(--ne-ts,auto);border-bottom:1px solid var(--line)}
.ne-stage[data-wall="concrete"]{background-color:#2A2A2D}
.ne-stage[data-wall="dark"]{background-color:#0C0B10;background-image:radial-gradient(75% 70% at 50% 45%,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 100%)}
.ne-stage[data-wall="clear"]{background-color:#1D1D21;background-image:conic-gradient(#2A2A2E 25%,#1D1D21 0 50%,#2A2A2E 0 75%,#1D1D21 0);background-size:22px 22px}
.ne-fit{display:grid;place-items:center;max-width:100%}
.ne-sign{display:inline-block;font-size:60px;line-height:1.15;text-align:center;white-space:nowrap;font-weight:400;letter-spacing:0}
.ne-sign.is-empty{opacity:.32}
.ne-fit.is-quiet .ne-sign{animation:none!important} /* 점화(애니메이션은 tool.js가 코어 값으로 넣음)·깜빡임 다시 시작 전에는 깜빡임 정지 */
.ne-stage.is-off .ne-sign{color:var(--ne-off)!important;text-shadow:0 .02em 0 rgba(0,0,0,.55)!important;box-shadow:none!important;border-color:var(--ne-boff)!important;animation:none!important}

.ne-power{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:rgba(10,9,12,.55);color:#F2EEE8;font-family:var(--sans);font-size:12px;font-weight:650;cursor:pointer}
.ne-power i{width:9px;height:9px;border-radius:50%;background:#55555B}
.ne-power[aria-pressed="true"] i{background:var(--ne-c);box-shadow:0 0 5px var(--ne-c),0 0 11px var(--ne-c)}
.ne-power:hover{background:rgba(10,9,12,.75)}
.ne-power:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 예시 띠 */
.ne-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;border-bottom:1px solid var(--soft)}
.ne-ex{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.ne-exb{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);transition:background var(--ease),border-color var(--ease)}
.ne-exb::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sw);box-shadow:0 0 5px var(--sw)}
.ne-exb:hover{background:var(--btn);border-color:var(--line)}

/* 2×2 칸: 글자 | 글꼴, 색·벽 | 빛·깜빡임 (서로 다른 패널) */
.ne-deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.ne-panel{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 16px 16px}
.ne-panel:nth-child(odd){border-right:1px solid var(--soft)}
.ne-panel:nth-child(n+3){border-top:1px solid var(--soft)}
.ne-panel .v2-f > label{margin-bottom:6px}
.ne-text{display:block;width:100%;min-height:86px;resize:vertical;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.45;transition:border-color var(--ease),box-shadow var(--ease)}
.ne-text:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.ne-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.ne-panel > .v2-label{margin-top:4px}
.ne-fonts button{display:inline-flex;align-items:center;gap:6px}
.ne-fonts b{font-weight:400;font-size:14px;line-height:1}
.ne-fonts [data-f="tube"] b{font-family:'Tilt Neon',sans-serif}
.ne-fonts [data-f="script"] b{font-family:'Neonderthaw',cursive;font-size:17px}
.ne-fonts [data-f="sans"] b{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.ne-fonts [data-f="serif"] b{font-family:Georgia,'Times New Roman',serif}
.ne-fonts [data-f="mono"] b{font-family:'Courier New',ui-monospace,monospace}

.ne-sws{display:flex;flex-wrap:wrap;gap:4px;transition:opacity var(--ease)}
.ne-sws.is-off{opacity:.5}
.ne-sw{position:relative;flex:0 0 auto;width:26px;height:26px;padding:0;border:2px solid var(--card);border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:box-shadow var(--ease)}
.ne-sw[aria-pressed="true"],.ne-sw--pick.is-on{box-shadow:0 0 0 2px var(--ink),0 0 9px var(--sw,transparent)}
.ne-sw:focus-visible,.ne-sw--pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ne-sw--pick{display:block;overflow:hidden;background:conic-gradient(#FF3D2E,#FFE53D,#6BFF3A,#00F5D4,#2CC8FF,#B44CFF,#FF2D95,#FF3D2E)}
.ne-sw--pick input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.ne-boxsw{margin-top:6px}

.ne-glowhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ne-glowhead .v2-label{margin:0}
.ne-glowval{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ne-range{width:100%;margin:0 0 4px;accent-color:var(--fill)}

/* 저장·빛 단면 | 코드: 코드 칸은 왼쪽 높이를 따르고 넘치면 스크롤 */
.ne-out{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
.ne-save{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px 16px 16px;border-right:1px solid var(--soft)}
.ne-savea,.ne-saveb{display:flex;flex-direction:column;gap:8px;min-width:0}
.ne-acts{display:flex;flex-wrap:wrap;gap:8px}
.ne-acts .v2-btn{flex:1 1 auto;justify-content:center}
.ne-status{margin:0;line-height:1.5}
.ne-status:empty{display:block;margin-top:-8px}
.ne-reach{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.5;color:var(--ink)}
.ne-profile{display:block;width:100%;height:auto;overflow:visible}
.ne-gl{stroke:var(--soft);stroke-width:1}
.ne-tk{font-family:var(--sans);font-size:9.5px;font-weight:600;fill:var(--muted)}
.ne-pa{fill:color-mix(in srgb,var(--ne-c) 26%,transparent)}
.ne-pl{fill:none;stroke:color-mix(in srgb,var(--ne-c) 62%,var(--ink));stroke-width:2;stroke-linejoin:round}
.ne-pw{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3}
.ne-pr{stroke:var(--accent);stroke-width:1;stroke-dasharray:2 3}
.ne-code{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:300px}
.ne-codehead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 6px}
.ne-pre{contain:size;min-height:0;margin:0;padding:2px 16px 14px;overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink);white-space:pre;tab-size:2}
.ne-pre:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@container newk (max-width:640px){
  .ne-out{grid-template-columns:minmax(0,1fr)}
  .ne-save{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;border-right:0;border-bottom:1px solid var(--soft)}
  .ne-code{min-height:0}
  .ne-pre{contain:none;max-height:340px}
}
@container newk (max-width:560px){
  .ne-stage{aspect-ratio:4/3;min-height:220px}
  .ne-deck{grid-template-columns:minmax(0,1fr)}
  .ne-panel:nth-child(odd){border-right:0}
  .ne-panel:nth-child(n+2){border-top:1px solid var(--soft)}
}
@container newk (max-width:480px){
  .ne-save{grid-template-columns:minmax(0,1fr)}
  .ne-strip,.ne-panel,.ne-save,.ne-codehead,.ne-pre{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .ne-sign{animation:none!important}
  .ne-fit.is-ignite{animation:none}
}
