/* 웹 계산기 전용 스타일 (calculator.php 에서만 불러옴) */
/* 계산기 전용 색 토큰: 라이트 값 = 기존 디자인, 다크 값 = html[data-theme="dark"] (화면 출력에만) */
.wc-app {
    --wc-display: #1f2d3a;
    --wc-key: #eef1f7;        --wc-key-line: var(--line-4);   --wc-key-text: #223;   --wc-key-hover: #e1e8f2;
    --wc-digit: #fff;         --wc-digit-hover: #f3f6f9;
    --wc-op: #e1ebf8;         --wc-op-text: #2a5fa5;          --wc-op-hover: #d3e2f5;
    --wc-danger: #fdecea;     --wc-danger-text: #c62828;      --wc-danger-hover: #fbd9d5;
    --wc-mem: #fff6dc;        --wc-mem-line: #f0dfa8;         --wc-mem-text: #8a6a00;  --wc-mem-hover: #ffefbd;
    --wc-eq: #2e6aad;         --wc-eq-hover: #245a96;
    --wc-code-bg: #f1f4f7;    --wc-row-hover: #f5f9fd;        --wc-rule: #1f2d3a;
}
@media screen {
    :root[data-theme="dark"] .wc-app {
        --wc-display: #0b1016;
        --wc-key: #262e38;      --wc-key-text: #dfe4ea;   --wc-key-hover: #313b47;
        --wc-digit: #323c48;    --wc-digit-hover: #3c4755;
        --wc-op: #1e3856;       --wc-op-text: #7db4f2;    --wc-op-hover: #254468;
        --wc-danger: #3d2125;   --wc-danger-text: #ff8f8a; --wc-danger-hover: #4a282c;
        --wc-mem: #3a3216;      --wc-mem-line: #5a4d22;   --wc-mem-text: #f0cf6a;  --wc-mem-hover: #46401f;
        --wc-eq: #3578c4;       --wc-eq-hover: #2d68ad;
        --wc-code-bg: #262d36;  --wc-row-hover: #1f2a36;  --wc-rule: #55606e;
    }
}
.wc-app { display: grid; grid-template-columns: 480px 384px; justify-content: start; gap: 15px; align-items: start; }
.wc-app *, .wc-app *::before, .wc-app *::after { box-sizing: border-box; }
.wc-app button { font-family: inherit; }

.wc-calc {
    background: var(--surface); border-radius: 12px; padding: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* 디스플레이 */
.wc-display {
    background: var(--wc-display); color: #fff; border-radius: 8px;
    padding: 9px 14px 10px; margin-bottom: 9px; min-height: 105px; text-align: right;
}
.wc-flags { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.wc-angle, .wc-mem {
    border: 0; border-radius: 4px; cursor: pointer;
    background: rgba(255,255,255,.12); color: #8fb3d1;
    font-size: 11px; padding: 2px 8px; line-height: 1.3;
}
.wc-angle:hover, .wc-mem:hover { background: rgba(255,255,255,.22); }
.wc-angle span.on { color: #fff; font-weight: bold; text-decoration: underline; text-underline-offset: 3px; }
.wc-mem { display: none; color: #ffd54f; font-weight: bold; }
.wc-mem.has { display: inline-block; }

.wc-expr {
    font-size: 17px; min-height: 26px; line-height: 26px; margin-top: 6px;
    overflow-x: auto; white-space: nowrap; color: #bfe0f7; scrollbar-width: thin;
}
.wc-result { font-size: 26px; font-weight: bold; min-height: 34px; line-height: 34px; color: #9fb7cc; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.wc-result.final { color: #fff; }
.wc-result.error { color: #ff8a80; font-size: 14px; font-weight: normal; }

/* 키패드 */
.wc-pad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.wc-pad button {
    height: 38px; padding: 0; border: 1px solid var(--wc-key-line); border-radius: 6px;
    background: var(--wc-key); color: var(--wc-key-text); font-size: 13px; cursor: pointer;
    transition: background .08s, transform .05s;
}
.wc-pad button:hover { background: var(--wc-key-hover); }
.wc-pad button:active { transform: scale(.96); }
.wc-pad .sci { background: var(--wc-key); }
.wc-pad .mem { background: var(--wc-mem); border-color: var(--wc-mem-line); color: var(--wc-mem-text); font-weight: bold; }
.wc-pad .mem:hover { background: var(--wc-mem-hover); }
.wc-pad .digit { background: var(--wc-digit); font-size: 16px; font-weight: bold; }
.wc-pad .digit:hover { background: var(--wc-digit-hover); }
.wc-pad .op { background: var(--wc-op); color: var(--wc-op-text); font-size: 16px; font-weight: bold; }
.wc-pad .op:hover { background: var(--wc-op-hover); }
.wc-pad .fn { background: var(--wc-key); }
.wc-pad .danger { background: var(--wc-danger); color: var(--wc-danger-text); font-weight: bold; }
.wc-pad .danger:hover { background: var(--wc-danger-hover); }
.wc-pad .eq { background: var(--wc-eq); border-color: var(--wc-eq); color: #fff; font-size: 18px; font-weight: bold; }
.wc-pad .eq:hover { background: var(--wc-eq-hover); }
.wc-pad .span2 { grid-column: span 2; }

.wc-help { margin: 12px 0 0; font-size: 11px; color: var(--muted-3); line-height: 1.8; }
.wc-help code { background: var(--wc-code-bg); padding: 0 4px; border-radius: 3px; font-size: 10.5px; }

/* 계산 기록 */
.wc-history { background: var(--surface); border-radius: 12px; padding: 16px 18px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wc-history-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 2px solid var(--wc-rule); font-size: 16px; font-weight: bold; color: var(--wc-key-text); }
.wc-link { background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: normal; color: var(--danger-text); }
.wc-history-list { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.wc-history-list li { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.wc-history-list li:hover { background: var(--wc-row-hover); }
.wc-history-list li.wc-empty { cursor: default; color: var(--faint); align-items: center; font-size: 14px; padding: 22px 4px; border: 0; }
.wc-history-list li.wc-empty:hover { background: none; }
.wc-h-expr { font-size: 13px; color: var(--muted-3); word-break: break-all; }
.wc-h-res { font-size: 18px; font-weight: bold; color: var(--link); word-break: break-all; }

@media (max-width: 920px) {
    .wc-app { grid-template-columns: minmax(0, 480px); }
}
@media (max-width: 560px) {
    .wc-app { grid-template-columns: minmax(0, 1fr); }
    .wc-calc { padding: 10px; }
    .wc-pad { gap: 4px; }
    .wc-pad button { height: 42px; }
}