/* 생활 계산기 공용 모양(2026-10-07). 사이트 기본(미색·검정·빨간 물음표) + 계산기마다 --ac 한 색
 * 움직임: 결과 숫자 굴림 · 짐작/진짜 핀이 막대 위로 떨어짐 · 결과 줄이 차례로 올라옴 */
:root { --bg: #f2efe8; --ink: #141414; --sub: #5d5850; --line: #d9d3c6; --card: #fffdf8; --red: #ff4b2b; --ac: #2f6fdb; --color-bg: var(--bg); --color-text: var(--ink); --color-text-secondary: var(--sub); color-scheme: light; }
html, body { background: var(--bg); color: var(--ink); }
.cc { max-width: 980px; margin: 0 auto; padding: 0 16px 40px; }
.cc-v { max-width: 480px; margin: 0 auto; padding-top: 14px; }
.cc-kick { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--ac); color: #fff; font: 800 13px/1 var(--font-sans); }
.cc-title { margin: 12px 0 0; font: 900 38px/1.12 var(--font-sans); letter-spacing: -0.04em; word-break: keep-all; }
.cc-lead { margin: 8px 0 0; font: 600 15px/23px var(--font-sans); color: var(--sub); word-break: keep-all; }
.cc-chal { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; border: 2px dashed var(--ac); border-radius: 14px; background: var(--card); font: 600 14px/21px var(--font-sans); }
.cc-chal b { font: 900 17px/1.2 var(--font-sans); color: var(--ac); }
#cform { display: grid; gap: 12px; margin-top: 16px; }
.cf { display: grid; gap: 6px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.cf-l { font: 800 14px/1.2 var(--font-sans); }
.cf-h { font: 600 12.5px/1.4 var(--font-sans); color: var(--sub); }
.cf-num { display: flex; align-items: center; gap: 8px; }
.cf-num input, .cf select, .cf input[type="date"] { width: 100%; min-width: 0; height: 48px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 800 20px/1 var(--font-sans); box-sizing: border-box; }
.cf select, .cf input[type="date"] { font-size: 17px; }
.cf-num span { flex: none; font: 800 16px/1 var(--font-sans); color: var(--sub); }
.cf-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-yn button { height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font: 800 16px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.cf-yn button.on { background: var(--ink); color: #fff; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chips button { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: 700 13px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.cc-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 16px; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--ac); color: #fff; box-shadow: 0 5px 0 var(--ink); font: 900 18px/1 var(--font-sans); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.cc-go:active { transform: translateY(5px); box-shadow: none; }
.cc-go--sub { background: var(--card); color: var(--ink); }
.cc-err { margin: 10px 0 0; font: 800 14px/20px var(--font-sans); color: var(--red); }
/* 짐작 */
.cg { margin-top: 18px; padding: 22px 18px; border: 2.5px solid var(--ink); border-radius: 18px; background: var(--card); text-align: center; }
.cg-k { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; font: 900 34px/1 var(--font-sans); animation: cc-bob 1.4s ease-in-out infinite; }
@keyframes cc-bob { 50% { transform: translateY(-6px) rotate(-8deg); } }
.cg-q { margin: 12px 0 0; font: 900 22px/1.3 var(--font-sans); word-break: keep-all; }
.cg-v { margin: 14px 0 6px; font: 900 34px/1 var(--font-sans); color: var(--ac); }
#guess { width: 100%; accent-color: var(--ac); height: 34px; }
.cg-skip { margin-top: 10px; border: 0; background: none; font: 700 13px/1 var(--font-sans); color: var(--sub); text-decoration: underline; cursor: pointer; }
/* 결과 */
.cr { margin-top: 18px; padding: 22px 18px; border: 2.5px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 6px 6px 0 var(--ac); }
.cr-h { font: 800 15px/1.3 var(--font-sans); color: var(--sub); }
.cr-v { margin: 8px 0 0; font: 900 44px/1.05 var(--font-sans); letter-spacing: -0.03em; word-break: keep-all; }
.rg { margin-top: 16px; padding: 14px; border-radius: 14px; background: #f6f2ea; }
.rg-t { display: grid; gap: 4px; }
.rg-t b { font: 900 18px/1.2 var(--font-sans); color: var(--ac); }
.rg-t span { font: 700 13px/1.4 var(--font-sans); color: var(--sub); }
.rg-bar { position: relative; height: 10px; margin: 30px 6px 4px; border-radius: 99px; background: var(--line); }
.rg-bar i { position: absolute; top: -6px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 3px solid #fff; animation: cc-drop 0.6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.rg-bar i em { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font: 800 12px/1 var(--font-sans); font-style: normal; white-space: nowrap; }
.rg-me { background: var(--sub); } .rg-real { background: var(--red); animation-delay: 0.25s !important; }
@keyframes cc-drop { from { transform: translateY(-30px); opacity: 0; } }
.rg-f { margin: 8px 0 0; font: 800 14px/1.4 var(--font-sans); }
#rrows { display: grid; gap: 2px; margin-top: 14px; }
.rr { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--line); font: 600 14.5px/1.4 var(--font-sans); animation: cc-up 0.4s backwards; }
.rr:nth-child(2) { animation-delay: .06s } .rr:nth-child(3) { animation-delay: .12s } .rr:nth-child(4) { animation-delay: .18s } .rr:nth-child(5) { animation-delay: .24s } .rr:nth-child(6) { animation-delay: .3s }
.rr b { font-weight: 900; text-align: right; }
@keyframes cc-up { from { transform: translateY(10px); opacity: 0; } }
#rnotes { margin: 12px 0 0; padding-left: 18px; font: 600 13px/1.6 var(--font-sans); color: var(--sub); }
.cr-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff1ec; color: #a8321c; font: 800 13.5px/1.5 var(--font-sans); }
.cc-basis { margin-top: 14px; font: 600 12.5px/1.5 var(--font-sans); color: var(--sub); }
.cc-basis summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.cc-basis table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.cc-basis td, .cc-basis th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-doc { max-width: 640px; margin: 40px auto 0; }
.cc-doc h2 { font: 900 20px/1.3 var(--font-sans); }
.cc-doc p, .cc-doc summary { font: 500 14.5px/23px var(--font-sans); color: var(--sub); }
.cc-doc summary { color: var(--ink); font-weight: 700; cursor: pointer; }
.rm *, .rm *::before, .rm *::after { animation: none !important; transition: none !important; }