:root{
    --bg:#ffffff;
    --ink:#111827;           /* text */
    --muted:#6b7280;
    --accent:#0A0090;  /* Excel green */
    --accent-weak:#e4f2e8;
    --bevel:#dcdfe5;          /* grid lines */
    --header-bg:#f3f6fb;      /* header cells */
    --toolbar:#f8fafc;
    --cell-w: 125px;
    --cell-h: 25px;
    --row-label-w: 48px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    color:var(--ink);
    background:var(--bg);
    font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
.app{display:flex; flex-direction:column; height:100%;}

/* Title bar */
.titlebar{
    display:flex; align-items:center; gap:10px; padding:8px 12px;
    background:var(--toolbar); border-bottom:1px solid var(--bevel);
}
.titlebar .logo{width:18px;height:18px;border-radius:2px;background:var(--accent);}
.titlebar .name{font-weight:600}
.titlebar .actions{margin-left:auto; display:flex; gap:6px}
.titlebar .btn{padding:6px 10px; border:1px solid var(--bevel); background:#fff; border-radius:6px; cursor:pointer}
.titlebar .btn:hover{background:#f3f4f6}

/* Ribbon (lightweight) */
.ribbon{display:flex; gap:8px; align-items:center; padding:8px 12px; background:#fff; border-bottom:1px solid var(--bevel);}
.ribbon .seg{display:flex; gap:6px; padding:6px; border:1px solid var(--bevel); border-radius:8px; background:var(--toolbar)}
.ribbon .seg button{padding:6px 10px; border:1px solid var(--bevel); background:#fff; border-radius:6px; cursor:pointer}
.ribbon .seg button:hover{background:#f9fafb}

/* Name box + formula bar */
.fxbar{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--bevel); background:#fff}
.fxbar .label{color:var(--muted)}
.fxbar input, .fxbar .namebox{height:32px}
.namebox{width:72px; min-width:72px; border:1px solid var(--bevel); border-radius:6px; padding:0 8px; background:#fff}
#formula{flex:1; border:1px solid var(--bevel); border-radius:6px; padding:0 10px}

/* Grid area */
.gridwrap{position:relative; flex:1; overflow:auto; background:#fff}
.grid{display:grid; grid-template-columns: var(--row-label-w) repeat(var(--COLS), var(--cell-w)); grid-auto-rows: var(--cell-h);}

.corner, .col-header, .row-header{position:sticky; background:var(--header-bg); z-index:3}
.corner{top:0; left:0; z-index:4; border-right:1px solid var(--bevel); border-bottom:1px solid var(--bevel);}

.col-header{top:0; text-align:center; font-weight:600; border-right:1px solid var(--bevel); border-bottom:1px solid var(--bevel);}
.row-header{left:0; text-align:right; padding-right:6px; font-weight:600; border-right:1px solid var(--bevel); border-bottom:1px solid var(--bevel);}

.cell{border-right:1px solid var(--bevel); border-bottom:1px solid var(--bevel); padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cell[contenteditable="true"]{outline:none}

/* Active cell outline */
.cell.active{outline:2px solid var(--accent); outline-offset:-2px; background:#fff}
.row-header.active, .col-header.active{background:var(--accent-weak)}

/* Inline editor */
.editor{position:absolute; display:none; border:2px solid var(--accent); background:#fff; padding:0; margin:0}
.editor input{border:0; outline:0; width:100%; height:100%; padding:2px 6px; font:inherit}

/* Sheets + status */
.sheets{display:flex; align-items:center; gap:6px; padding:6px 8px; border-top:1px solid var(--bevel); background:var(--toolbar)}
.tab{padding:6px 10px; border:1px solid var(--bevel); background:#fff; border-radius:6px; cursor:pointer}
.tab.active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.plus{padding:6px 10px; border:1px dashed var(--bevel); background:#fff; border-radius:6px; cursor:pointer}
.status{margin-left:auto; color:var(--muted)}



.abs-center {
  z-index: 999;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.abs-center .box {
  width: 900px;
  height: 318px;
  background: #fff;
  border: 1px solid #ccc;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

    
/* ===== Win98 Close Button ===== */
.win-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  font-family:monospace;
  font-size:13px;
  font-weight:bold;
  line-height:1;
  color:#000;
  background:#bfbfbf;
  border:0px solid #000;
  box-shadow:
    inset -1px -1px 0 #6e6e6e,
    inset  1px  1px 0 #fff;
  cursor:pointer;
  padding:0;
}
.win-close:hover{
  background:#d0d0d0;
}
.win-close:active{
  box-shadow:
    inset  1px  1px 0 #6e6e6e,
    inset -1px -1px 0 #fff;
  background:#9c9c9c;
}
    
.tws-typing-area{
    margin: 10px 10px 0 10px;
    border: 1px solid #ccc;
    padding: 35px 20px 15px 20px;
}


#sing {
    margin:0;
    padding:0;
    display: block;
    position: absolute;
    top: -2px;
    left: 35px;
    font-size: 28px;
    font-weight: normal;
    letter-spacing: -0.2px;
    color: rgba(0, 0, 0, 0);
}

.wrong {
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0A0090;
}

#npt{
    font-size: 14px;
    color: #BEBEBE;
    margin: 0;
    padding: 7px 0 0 0;
    border: 0;
}    
#opt {
    width: 100%;
    font-family: inherit;
    font-size: 28px;
    line-height: 1.13;
    letter-spacing: 0;
    resize: none;
    border: none;
    outline: none;
    background: none;
}

#ipt {
    width: 100%;
    height: 35px;
    font-family: inherit;
    font-size: 28px;
    line-height: 1.13;
    letter-spacing: 0;
    resize: none;
    border: none;
    /* border-bottom: 0.2rem solid #f2bf01; */
    outline: none;
    margin: 9px 0 0 0;
    background: none;
    position: relative;
    display: inline-block;
}


#clock {
    font-size: 12px;
}

.l {
    font-size: 16px;
    color: #fff;
}

.r {
    font-size: 20px;
    text-align: right;

}

    
    

.meter {
    height: 30px;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.meter span {
    display: block;
    height: 100%;
}

.progress {
    -webkit-animation: progressBar 1s ease-in-out;
    -webkit-animation-fill-mode: both;
    -moz-animation: progressBar 1s ease-in-out;
    -moz-animation-fill-mode: both;
}

@-webkit-keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@-moz-keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}
.stats{display:flex; flex-direction:column; gap:2px; padding: 10px;  }
.stat{display:flex; align-items:baseline; gap:8px}
.stat .k{min-width:100px; color:#374151; padding-left: 10px}
.stat .v{font-weight:600; color:var(--accent)}





#banner {
    border: 0px solid red;
    z-index: 9999;
    position: fixed;
    left: 50%;
    margin-left: -364px;
    margin-bottom: 20px;
    bottom: 0;
    width: 728px;
    height: 90px;
    text-align: center;
}



.kbd{background-color: #656565;
  border-radius: 5px;
  padding: 2px 8px 1px 8px;
  font-size: 19px;
  font-weight: bold;
  color: #fff;}
.openbar{margin-top:2px;color:#666;font-size:17px;letter-spacing:-0.1em;}