/* 만들어진 파일: design/web_build.py */
:root{
  /* 갓챠드로잉 D 안: 어두운 바탕에 라임 한 색. 한 줄 세로 흐름(최대 430px), 블록 사이 16px, 묶음 안 12/8px. 종이는 카드 그림 칸과 같은 비율(256:204) */
  --bg:#0E0B16;--surface:#1B1728;--surface2:#2A2440;--line:#322B47;--text:#F6F3FF;--sub:#A9A2C2;--lime:#E4FF3A;--warn:#FF9CC2;
  --font-display:'Black Han Sans','Arial Black',sans-serif;--font-body:'Noto Sans KR',system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
h1,h2,h3{text-wrap:balance}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
#app{min-height:100%;display:flex;flex-direction:column;overflow-x:hidden;overflow-x:clip}
.col{flex:1 1 auto;width:100%;max-width:430px;margin:0 auto;box-sizing:border-box;padding:24px 20px 28px;display:flex;flex-direction:column}
.view{position:relative;z-index:0;display:flex;flex-direction:column;gap:16px;flex:1 1 auto}
.sub{color:var(--sub)}
.num{font-variant-numeric:tabular-nums}
.t-b1{font-weight:700;font-size:15px;line-height:1;position:relative;top:-.045em}
.t-b2{font-weight:700;font-size:13px;line-height:1;position:relative;top:-.045em}
.t-b2r{font-weight:500;font-size:13px;line-height:1;position:relative;top:-.045em}
.t-c{font-weight:500;font-size:12px;line-height:1;position:relative;top:-.045em}
.t-p{margin:0;font-weight:500;font-size:13px;line-height:1.5;word-break:keep-all}
.msg{margin:0;font-weight:500;font-size:13px;line-height:1.4;color:var(--warn);text-align:center;word-break:keep-all}
.msg:empty{display:none}
.msg.sub{color:var(--sub)}
.msg[data-kind=ok]{color:var(--text)}
.box{box-sizing:border-box;border:1px solid var(--line);border-radius:28px;background:var(--surface)}
.fold{padding:0 19px}
.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;cursor:pointer;list-style:none;border-radius:12px}
.fold>summary::-webkit-details-marker{display:none}
.chev{display:flex;color:var(--sub);transition:transform .15s}
.fold[open] .chev{transform:rotate(90deg)}
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-top:1px solid var(--line)}
.kv>span:last-child{text-align:right;line-height:1.3;padding:8px 0}
.irow{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;border-top:1px solid var(--line)}
.rows{padding:0 19px}
.nrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-top:1px solid var(--line)}
.nrow:first-child{border-top:0}
.inp{width:100%;box-sizing:border-box;height:56px;margin:0;padding:0 16px;border:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--text);font-family:var(--font-body);font-weight:700;font-size:15px;outline:0}
.inp:focus{box-shadow:inset 0 0 0 1.5px var(--lime)}
textarea.inp{display:block;height:auto;min-height:56px;padding:14px 16px;font-weight:500;font-size:13px;line-height:1.6;resize:vertical}
.inp.num{width:96px;height:40px;padding:0 12px;border-radius:8px;background:var(--bg);text-align:right;font-variant-numeric:tabular-nums;flex:none}
.item{display:flex;flex-direction:column;gap:8px}
.item+.item{padding-top:16px;border-top:1px solid var(--line)}
.item-top{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:8px}
.wbox{display:flex;align-items:center;gap:8px}
.wbox .inp.num{width:72px;height:56px;border-radius:12px;background:var(--surface)}
.idel{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;box-sizing:border-box;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.seg button{height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--sub);font-weight:700;font-size:13px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--surface2);color:var(--text)}
.pre{margin:0;padding:0 0 20px;white-space:pre-wrap;word-break:break-word;font-family:var(--font-body);font-weight:500;font-size:12px;line-height:1.6;color:var(--sub)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
th,td{height:36px;padding:0 0 0 10px;text-align:right;white-space:nowrap;border-top:1px solid var(--line)}
thead th{border-top:0;font-weight:500;color:var(--sub)}
th:first-child,td:first-child{padding-left:0;text-align:left;color:var(--sub);font-weight:500}
.stage{position:relative;display:flex;justify-content:center;padding:8px 0}
.cardfit{position:relative;width:min(296px,100%);aspect-ratio:296/416;flex:none}
.cardfit.mini{width:100%}
.cardin{position:absolute;left:0;top:0;width:296px;height:416px;transform-origin:0 0}
.cardin p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hit{position:absolute;left:0;top:0;width:100%;height:100%;padding:0;border:0;border-radius:12px;background:none;cursor:pointer}
#res-glow{position:absolute;left:50%;top:50%;width:712px;height:712px;margin:-356px 0 0 -356px;z-index:-1;pointer-events:none}
.dot[aria-pressed=true]>span{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--text)!important}
/* 그리기 묶음: 종이, 도구 줄, 색 줄. 도구 줄과 색 줄은 같은 일곱 칸 격자를 써서 위아래 칸이 맞는다 */
.kit{display:flex;flex-direction:column;gap:12px}
.tray{display:flex;flex-direction:column;gap:8px}
.paper{position:relative;width:100%;aspect-ratio:256/204;flex:none;border-radius:28px;background:#FFFEFA;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.paper canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.paper-ph{position:absolute;left:0;right:0;top:50%;height:36px;margin-top:-18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;pointer-events:none}
.bar{list-style:none;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));box-sizing:border-box;padding:5px 7px;border:1px solid var(--line);border-radius:28px;background:var(--surface)}
.bar>li{position:relative;display:flex;justify-content:center;min-width:0}
.bar>li.cut::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.tool,.act,.dot{display:flex;align-items:center;justify-content:center;width:100%;max-width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;background:none;cursor:pointer}
.tool{position:relative;color:var(--sub)}
.tool::before{content:"";position:absolute;left:50%;top:50%;width:min(100%,44px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.tool>svg{position:relative}
.tool[aria-pressed=true]{color:var(--bg)}
.tool[aria-pressed=true]::before{background:var(--text)}
.act{color:var(--text)}
.dot>span{width:28px;height:28px;flex:none;border-radius:50%;transition:opacity .15s}
.bar.off .dot>span{opacity:.35}
.tp{display:flex;align-items:center;justify-content:center;height:44px;padding:0;border:0;background:none;cursor:pointer}
.tp[aria-pressed=true]>span{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)!important}
button:disabled{opacity:.5;cursor:default}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweep{0%{transform:translateX(-190%) skewX(-14deg)}50%,100%{transform:translateX(520%) skewX(-14deg)}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@keyframes shoot{0%{opacity:0;transform:translateX(70px)}18%,55%{opacity:1}100%{opacity:0;transform:translateX(-90px)}}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.ranklist>li:first-child{border-top:0!important}
.tab{display:flex;flex-direction:column;gap:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats>div{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.stats>div>b{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.stats>div>span{font-weight:500;font-size:12px;line-height:1;color:var(--sub)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:339px){.pair{grid-template-columns:minmax(0,1fr)}}
@media (max-width:359px){.stats>div{padding:12px}.stats>div>b{font-size:18px}}
.past{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;margin:0;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:inherit;text-align:left;cursor:pointer}
.past:first-child{border-top:0}
.gbtn[data-armed="1"]{border-color:var(--warn);color:var(--warn)}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
textarea.inp{word-break:keep-all}
.erow{border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}
.erow>summary{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:72px;padding:0 16px 0 12px;cursor:pointer;list-style:none}
.erow>summary::-webkit-details-marker{display:none}
.erow img.th{display:block;width:48px;height:48px;border-radius:12px;background:#FFFEFA;object-fit:cover}
.erow .body{display:flex;flex-direction:column;padding:0 16px 16px}
.erow .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 0}
.erow .pair img{display:block;width:100%;aspect-ratio:256/204;border-radius:12px;background:#FFFEFA;object-fit:contain}
.fbrow{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.inp::placeholder{color:#8780A0;font-weight:500}
.inp[readonly]{color:var(--sub)}
#rank-me:empty{display:none}
.gbtn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;margin:0;gap:8px;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);white-space:nowrap;cursor:pointer}
.gbtn>svg{display:block;flex:none;margin-left:-2px}
.gbtn>span{font-weight:700;font-size:15px;line-height:1;position:relative;top:-.045em}
@media (min-width:900px){.wide .col{max-width:560px}}