/* Atom MV — 화면 전체가 주기율표(2026-10-27 사용자). 18열 × 7행 + 아래 두 줄(f 블록: 시료·레이어)
   가운데 빈 곳이 화면(프레임). 칸 위 굵은 선 색 = 가족(노래·가사·이미지·모드·불꽃·반응·프레임)
   키컬러 형광 오렌지. 한 가지 어두운 세계로만 그림 */
:root{
  --void:#050405; --bench:rgba(16,13,14,.78); --ink:#f4ede6; --dim:rgba(244,237,230,.46); --faint:rgba(244,237,230,.13);
  --flame:#ff6a00; --flame-hi:#ffb15c; --flame-glow:rgba(255,106,0,.16);
  --song:#ff6a00; --lyric:#ffe7cf; --image:#ffb15c; --mode:#ff6a00; --react:#2ee6c9; --frame:#c78cff; --sys:rgba(244,237,230,.55);
  --f-disp:"Syncopate","Arial Black",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:18px; --gap:4px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--void);color:var(--ink);font:12px/1.45 var(--f-mono);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--flame);outline-offset:2px}
[hidden]{display:none!important}

.ui{position:fixed;inset:0 0 var(--sf-h,0px) 0;display:grid;grid-template-rows:1fr;padding:calc(var(--pad) - 4px + env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) calc(var(--pad) + env(safe-area-inset-bottom,0px)) max(var(--pad),env(safe-area-inset-left,0px))}
.tok{cursor:pointer;color:var(--ink);border-bottom:1px dotted var(--faint)}
.tok:hover,.tok.on{color:var(--flame)}
.c{color:var(--dim)}

/* 타이틀(아래 왼쪽 f 블록 자리) · 범례(7행 오른쪽) · 화면 위 반응식·글 한 줄 */
.logo{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:4px 8px;border-top:2px solid var(--flame);min-width:0;overflow:hidden}
.logo b{font:700 clamp(13px,1.12vw,19px)/1 var(--f-disp);letter-spacing:.06em;color:var(--flame);text-shadow:0 0 18px var(--flame-glow);white-space:nowrap}
.logo .sub{font:700 7.5px/1.25 var(--f-disp);letter-spacing:.14em;color:var(--ink)}
.logo .by{font-size:8.5px;color:var(--dim);letter-spacing:.04em;white-space:nowrap}
.logo .by a{color:var(--dim);text-decoration:none}
.logo .by a:hover{color:var(--flame)}
.readout{position:relative;z-index:2;min-width:0;overflow:hidden;padding:6px 8px;border-top:1px solid var(--faint);font-size:10.5px}
.eqn{letter-spacing:.06em;line-height:1.5;word-break:break-word}
.eqn b{font-weight:500}
.eqn i{font-style:normal;color:var(--flame)}
.log{margin-top:6px;color:var(--dim);font-size:10px;line-height:1.45;word-break:break-word}
.log b{color:var(--ink);font-weight:500}
.log .tok{font-size:10px}
.formula{margin-top:6px;font-size:11px;letter-spacing:.04em;color:var(--dim)}
.formula sub{color:var(--flame-hi);font-size:8.5px}
.key{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;padding:4px 6px;border:1px dashed var(--faint);min-width:0;overflow:hidden}
.kel{position:relative;flex:none;width:44px;height:40px;border:1px solid var(--faint);border-top:2px solid var(--flame);font-size:6.5px;color:var(--dim)}
.kel span{position:absolute}
.kel .n{left:3px;top:2px}.kel .v{right:3px;top:2px}.kel .s{left:3px;top:12px;font:700 12px var(--f-disp);color:var(--ink)}.kel .w{left:3px;bottom:2px}
.fams{display:grid;grid-template-columns:repeat(2,auto);gap:3px 10px;font-size:7.5px;letter-spacing:.06em;color:var(--dim)}
.fams i{font-style:normal;display:flex;align-items:center;gap:4px}
.fams i::before{content:"";width:8px;height:2px;background:var(--fc)}

/* 판 */
.pt{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr)) .2fr minmax(0,1fr);gap:var(--gap);min-height:0;position:relative}

/* 가운데 빈 곳 = 화면. 점 무늬 바탕 위에 고른 비율의 프레임만 검게, 모서리 표시 */
.stage{grid-area:1/3/7/17;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(rgba(244,237,230,.07) 1px,transparent 1.2px) 0 0/14px 14px}
#cv{display:block;touch-action:none;cursor:grab;background:#050405}
#cv:active{cursor:grabbing}
.frame{position:absolute;pointer-events:none;--k:16px;--fc:var(--flame);
  background:linear-gradient(var(--fc),var(--fc)) left top/var(--k) 1px,linear-gradient(var(--fc),var(--fc)) left top/1px var(--k),
  linear-gradient(var(--fc),var(--fc)) right top/var(--k) 1px,linear-gradient(var(--fc),var(--fc)) right top/1px var(--k),
  linear-gradient(var(--fc),var(--fc)) left bottom/var(--k) 1px,linear-gradient(var(--fc),var(--fc)) left bottom/1px var(--k),
  linear-gradient(var(--fc),var(--fc)) right bottom/var(--k) 1px,linear-gradient(var(--fc),var(--fc)) right bottom/1px var(--k);
  background-repeat:no-repeat;outline:1px solid rgba(255,106,0,.18)}
.ftag{font-size:10px;letter-spacing:.08em;color:var(--dim);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--faint)}
.ftag b{color:var(--ink);font-weight:500}
.lyric{position:absolute;transform:translate(-50%,-50%);text-align:center;white-space:pre-line;word-break:keep-all;line-height:1.3;text-shadow:0 0 .4em rgba(0,0,0,.9);cursor:move;touch-action:none;user-select:none;z-index:1}
.lyric:empty{display:none}

/* 원소 칸 */
.el{position:relative;display:block;min-width:0;min-height:0;text-align:left;border:1px solid var(--faint);border-top:2px solid var(--fc,var(--faint));background:color-mix(in srgb,var(--fc,#fff) 4%,var(--bench));overflow:hidden;transition:border-color .2s,background .2s,opacity .2s;user-select:none}
.el>span{position:absolute;pointer-events:none;z-index:1}
.el .n{left:6px;top:4px;font-size:8.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.el .v{right:6px;top:4px;font-size:9.5px;color:var(--flame-hi);font-variant-numeric:tabular-nums;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.el .s{left:6px;top:50%;transform:translateY(-55%);font:700 clamp(14px,1.45vw,21px)/1 var(--f-disp);white-space:nowrap;text-shadow:0 0 8px var(--void)}
.el .w{left:6px;right:6px;bottom:4px;font-size:7.5px;letter-spacing:.06em;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el:hover{border-color:var(--fc,var(--flame))}
.el.on{border-color:var(--fc,var(--flame));background:color-mix(in srgb,var(--fc,var(--flame)) 16%,var(--bench))}
.el.on .s{color:var(--fc,var(--flame))}
.el.idle{opacity:.36}
.el.drag{cursor:ns-resize;touch-action:none}
.f-song{--fc:var(--song)}.f-lyric{--fc:var(--lyric)}.f-image{--fc:var(--image)}.f-mode{--fc:var(--mode)}.f-react{--fc:var(--react)}.f-frame{--fc:var(--frame)}.f-sys{--fc:var(--sys)}.f-go{--fc:var(--flame)}
.f-flame{--fc:var(--t,var(--flame))}
.fams .f-flame::before{background:linear-gradient(90deg,#ff6a00,#ff2433,#29f2cc,#c78cff)}

/* 모드·불꽃 칸: 그 효과를 점 애니로 */
.el .mini{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.f-flame .s{color:var(--t)}
.f-flame.on{background:color-mix(in srgb,var(--t) 14%,var(--bench))}

/* 반응 칸: 비커처럼 차오름 + 지금 소리 선 */
.f-react .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(46,230,201,.26),rgba(46,230,201,.04));border-top:1px solid rgba(46,230,201,.75)}
.f-react .lv{position:absolute;left:0;width:34%;height:1px;bottom:0;background:var(--ink);opacity:.8}
.f-react .v{color:var(--react)}

/* 프레임 칸: 비율 상자 */
.f-frame .box{position:absolute;right:7px;bottom:17px;height:34%;max-width:46%;border:1px solid var(--frame);opacity:.7}
#t-r-FULL .box{border-style:dashed}
.f-frame .s{font-size:clamp(11px,1vw,15px)}
.f-frame.on .box{background:color-mix(in srgb,var(--frame) 30%,transparent);opacity:1}

/* 노래 박자 칸 */
#t-beat.hit{background:color-mix(in srgb,var(--flame) 40%,var(--bench));box-shadow:0 0 18px var(--flame-glow)}
#t-beat.hit .s{color:var(--void);text-shadow:none}
#t-lcol .s{color:var(--sw,#fff)}
#t-song.on .w{color:var(--ink)}

/* 렌더 칸 */
.f-go{background:color-mix(in srgb,var(--flame) 14%,var(--bench));border-color:rgba(255,106,0,.5)}
.f-go .s{font-size:clamp(12px,1.1vw,16px);letter-spacing:.12em;color:var(--flame)}
.f-go .w{color:var(--ink);font-size:8px}
.f-go:hover{box-shadow:0 0 22px var(--flame-glow)}
.f-go.busy .s{color:var(--ink);animation:pulse 1.4s ease-in-out infinite}
.flask{position:absolute;right:12px;top:50%;height:58%;transform:translateY(-55%);overflow:visible;transform-origin:50% 90%}
.flask .gl{fill:none;stroke:var(--flame);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.flask .liq{fill:rgba(255,106,0,.35)}
.flask .b{fill:var(--flame-hi);opacity:0}
.f-go.busy .flask{animation:shake .32s ease-in-out infinite alternate}
.f-go.busy .flask .liq{fill:rgba(255,106,0,.6)}
.f-go.busy .flask .b{animation:bub 1.1s ease-in infinite}
.f-go.busy .flask .b2{animation-delay:.35s}.f-go.busy .flask .b3{animation-delay:.7s}
@keyframes shake{from{transform:translateY(-55%) rotate(-7deg)}to{transform:translateY(-55%) rotate(7deg)}}
@keyframes bub{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@keyframes pulse{50%{opacity:.55}}

/* f 블록: 시료(사진)·레이어. 판의 열에 맞춰 줄 섬 */
/* 사진·레이어: 각각 2열 2행 묶음. 칸 크기는 판과 같고, 넘치면 위아래로 밀어 봄 */
.mol{position:relative;border:1px dashed var(--faint);min-width:0;min-height:0;overflow:hidden}
.mol canvas{position:absolute;inset:0;width:100%;height:100%}
.mol span{position:absolute;left:6px;bottom:4px;font-size:9px;color:var(--dim);letter-spacing:.04em}
.mol sub{font-size:7px;color:var(--flame-hi)}
.fcol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);min-height:0;overflow-y:auto;scrollbar-width:none;container-type:size}
.fcol>*{height:calc((100cqh - var(--gap)) / 2)}
.el.ghost{border:1px dashed var(--faint);background:none;pointer-events:none}
.spec{--fc:var(--image)}
.spec::before{content:"";position:absolute;inset:0;background:var(--img) center/cover;opacity:.45;filter:grayscale(.4)}
.spec.on::before{opacity:.85;filter:none}
.spec .s small{font-size:.55em}
.spec .v{right:20px;color:var(--flame)}
.spec .w{color:var(--ink);text-shadow:0 0 6px #000}
.spec .x{position:absolute;right:0;top:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink);background:rgba(5,4,5,.7);pointer-events:auto;z-index:2}
.spec .x:hover{color:var(--flame)}
.spec.add{border-style:dashed;cursor:pointer;background:none}
.spec.add::before{display:none}
.spec.add .s{color:var(--image);font-weight:400}
.spec.add input{display:none}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lay{--fc:var(--c)}
.lay>span{pointer-events:auto;cursor:pointer}
.lay .s small{font:400 .5em var(--f-mono);color:var(--dim);margin-left:3px}
.lay .ch{color:var(--flame-hi);font-size:8.5px}
.lay .w{right:46%;pointer-events:auto}
.lay .z{right:6px;bottom:3px;font-size:9px;color:var(--flame-hi);cursor:ew-resize;touch-action:none;border-bottom:1px dashed rgba(255,177,92,.4)}
.lay .spot{position:absolute;right:7px;top:21px;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);cursor:pointer;z-index:2}
.lay.sel{border-color:var(--flame)}
.lay.sel .s{color:var(--flame)}
.lay.off{opacity:.45}
.lay.off .spot{background:none;box-shadow:none;border:1px solid var(--c)}
.lay.off .s{text-decoration:line-through}

/* 숨기기(H): 판은 사라지고 화면·로고만 */
.ui.off .el,.ui.off .fcol,.ui.off .key,.ui.off .readout,.ui.off .logo .sub{opacity:0;pointer-events:none}
.eye{position:fixed;right:max(var(--pad),env(safe-area-inset-right,0px));top:calc(var(--pad) + env(safe-area-inset-top,0px));font:400 18px var(--f-mono);color:var(--dim);z-index:6}
.eye:hover{color:var(--flame)}
.eye i{font-style:normal}

/* FULL: 화면이 창 전체로, 판은 그 위에 비침 */
@media (min-width:821px){
  body.full .stage{position:fixed;inset:0;z-index:0;background:var(--void)}
  body.full .el,body.full .key,body.full .logo{background:rgba(5,4,5,.5);backdrop-filter:blur(3px)}
  body.full .el.on{background:color-mix(in srgb,var(--fc,var(--flame)) 22%,rgba(5,4,5,.5))}
  body.full .frame{outline:0}
  body.full .pt>*:not(.stage){z-index:1}
}

/* 허브 공통 푸터(site-foot.js): 검은 바탕, PC에선 창 맨 아래 고정이라 판은 그 위까지만(--sf-h) */
footer[data-arapshow-foot]{--foot-bg:#000;--foot-ink:var(--ink);--foot-faint:var(--dim);--foot-line:rgba(244,237,230,.1);--foot-max:100vw;--foot-font:var(--f-mono);background:#000}
footer.sf{font-size:11px}
@media (min-width:641px){footer.sf.sf:not([data-fixed="off"]){padding-top:6px;padding-bottom:7px}}
footer.sf .sf-uni,footer.sf .sf-btn{font-size:11.5px}
body.full footer.sf{position:fixed;z-index:3}

/* 안내 · 툴팁 · 끌어다 놓기 · 상태 */
.info{position:fixed;right:max(var(--pad),env(safe-area-inset-right,0px));top:76px;width:min(420px,calc(100% - 32px));background:rgba(5,4,5,.94);border-left:1px solid var(--flame);padding:12px 16px;font-size:11.5px;display:none;z-index:5}
.info.open{display:block}
.info p{margin:0 0 10px}
.info i{font-style:normal;color:var(--flame)}
.info .ko{font-family:system-ui,sans-serif;word-break:keep-all;color:var(--dim);font-size:12px}
.info .parts{display:flex;gap:8px;flex-wrap:wrap;letter-spacing:.08em}
.info .parts button,.info .parts a{color:var(--ink);text-decoration:none}
.info .parts button:hover,.info .parts a:hover{color:var(--flame)}
.info .sep{color:var(--dim)}
.info .cred{color:var(--dim);font-size:9.5px;margin:0}
.tip{position:fixed;z-index:9;pointer-events:none;font:400 11.5px system-ui,sans-serif;color:var(--flame-hi);background:rgba(5,4,5,.9);padding:2px 8px;border-left:1px solid var(--flame);white-space:nowrap;word-break:keep-all}
.drop{position:fixed;inset:12px;border:1px dashed var(--flame);display:flex;align-items:center;justify-content:center;background:rgba(5,4,5,.7);z-index:10;letter-spacing:.24em;color:var(--flame);font:700 14px var(--f-disp)}
.status{position:absolute;left:50%;top:74%;transform:translate(-50%,-50%);background:rgba(5,4,5,.72);padding:10px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;text-align:center;text-shadow:0 0 12px #000;z-index:2}
.status b{font:700 clamp(16px,2.4vw,26px) var(--f-disp);letter-spacing:.2em;color:var(--flame);animation:pulse 1.4s ease-in-out infinite}
.status span{font-size:12px;letter-spacing:.08em;color:var(--ink)}
.status i{font:400 12px system-ui,sans-serif;font-style:normal;color:var(--flame-hi);word-break:keep-all}
.nogl .stage::after{content:"WebGL2 needed";color:var(--dim);letter-spacing:.2em}

/* 좁은 PC 창: 범례 줄임 */
@media (max-width:1180px) and (min-width:821px){ .fams{display:none} .el .w{font-size:7px} .logo .sub{display:none} }

/* 폰·세로창: 화면이 위, 판은 6칸 너비로 가족끼리 쌓임(가족 크기가 6칸에 맞음) */
@media (max-width:820px){
  html,body{overflow:auto;height:auto}
  .ui{position:static;display:block;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 40px max(12px,env(safe-area-inset-left,0px))}
  .pt{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
  .pt>*{grid-area:auto!important}
  .el{height:62px}
  .el.ghost,.key,.mol{display:none}
  .logo{grid-column:1/-1!important;order:-2;flex-direction:row;align-items:baseline;gap:10px;border:0;padding:2px 44px 8px 0}
  .logo .sub{display:none}
  .stage{grid-column:1/-1!important;height:60vh;height:60svh;order:-1;margin-bottom:6px}
  .readout{grid-column:1/-1!important;order:-1;border:0;padding:0 0 6px}
  .readout .formula{display:none}
  .fcol{grid-column:1/-1!important;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;height:62px;container-type:inline-size}
  .fcol>*{height:62px;width:calc((100cqw - 5 * var(--gap)) / 6)}
  .fcol>.ghost{display:none}
  .f-image{order:1}#tray{order:2}#layers{order:3}.f-mode{order:4}.f-flame{order:5}.f-song,.f-lyric{order:6}.f-react{order:8}.f-frame,.f-sys{order:9}#t-play,#t-time,#t-beat{order:10}
  .f-go{order:11;grid-column:1/-1!important}
  #t-m-cond,#t-f-photo,#t-song,#t-srt,#t-bass,#t-r-FULL,#t-play{grid-column-start:1!important}
  .el .s{font-size:16px}
  .info{top:calc(56px + env(safe-area-inset-top,0px))}
  .eye{top:calc(10px + env(safe-area-inset-top,0px));right:14px}
}
@media (prefers-reduced-motion:reduce){.spin,.f-go.busy .s,.f-go.busy .flask{animation:none}}

/* 차분하게(2026-10-27 사용자: 칸에 색이 너무 많으면 영상이 죽음). 칸은 회색조, 가족 색은 위쪽 선에만.
   켜진 칸은 바탕이 조금 밝아지고 글자가 흰색, 선이 굵어짐 */
.el,.f-flame.on,.f-go,body.full .el{background:rgba(18,17,18,.82)}
.el:hover{border-color:rgba(244,237,230,.28);border-top-color:var(--fc,var(--faint))}
.el.on,body.full .el.on{background:rgba(244,237,230,.075);border-color:rgba(244,237,230,.32);border-top:2px solid var(--fc,var(--faint));box-shadow:inset 0 2px 0 var(--fc,transparent)}
.el .s,.f-flame .s,.f-go .s,.lay.sel .s{color:rgba(244,237,230,.78)}
.el.on .s{color:var(--ink)}
.el .v,.f-react .v,.spec .v,.lay .ch,.lay .z{color:rgba(244,237,230,.6)}
.f-react .fill{background:linear-gradient(to top,rgba(244,237,230,.12),rgba(244,237,230,.02));border-top:1px solid rgba(244,237,230,.35)}
.f-frame .box{border-color:rgba(244,237,230,.4)}
.f-frame.on .box{background:rgba(244,237,230,.18)}
#t-beat.hit{background:rgba(244,237,230,.16);box-shadow:none}
#t-beat.hit .s{color:var(--ink)}
.f-go{border-color:var(--faint)}
.flask .gl{stroke:rgba(244,237,230,.7)}
.flask .liq{fill:rgba(244,237,230,.12)}
.f-go.busy .flask .gl{stroke:var(--flame)}
.lay.sel{border-color:rgba(244,237,230,.4)}
.lay .spot{box-shadow:none}
.lay .s small{color:rgba(244,237,230,.35)}
.spec::before{filter:grayscale(.85);opacity:.35}
.spec.on::before{filter:grayscale(.3);opacity:.7}
.logo b{text-shadow:none}