/* 제목 & 설명 (사이트 공통 스타일 준수) */
h1 {
  text-align: center;
  font-size: 2rem;
  margin-top: 2rem;
  color: var(--text-color);
}
.description {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}

/* 헤더 홈 링크 전용 */
.logo { text-decoration: none; color: white; font-weight: bold; transition: opacity 0.3s; }
.logo:hover { opacity: 0.8; }

/* 카드 */
.calc-card{
  width:95%;
  max-width: 920px;
  margin: 0 auto 2rem;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* 디스플레이 */
.display{
  background: var(--card-bg);
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-color, #ddd);
}
.history{
  min-height: 1.4rem;
  text-align: right;
  color: var(--text-secondary);
  font-size: 0.95rem;
  word-break: break-all;
}
.current{
  min-height: 3.2rem;
  text-align: right;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  word-break: break-all;
}

/* 키패드 그리드 */
.keypad{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .6rem;
  padding: .9rem;
}

/* 버튼 공통 */
.keypad button{
  appearance: none;
  border: 1px solid var(--border-color, #555);
  background: #1f2430; /* 기본 다크 버튼 톤 */
  color: #dfe6ee;
  border-radius: 18px;
  padding: .85rem .7rem;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform .05s ease, filter .2s ease, background-color .3s ease;
}
.keypad button:hover{ filter: brightness(1.05); }
.keypad button:active{ transform: translateY(1px); }

/* 탭/모드/위험/연산/=/0 */
.keypad .tab{
  background:#262c39;
  font-weight: 600;
}
.keypad .tab.active{
  outline: 2px solid var(--tag-bg);
  color:#fff;
}
.keypad .danger{ background:#432f2f; color:#ffdede; }
.keypad .op{ background:#262c39; }
.keypad .equal{
  grid-column: span 2;
  background:#7da6ff;
  color:#0b1220;
  font-weight:700;
}
.keypad .zero{ grid-column: span 5; }

/* 라이트 테마에서 버튼 대비 보정 */
html:not(.dark-mode) .keypad button{
  background:#e9ecf2; color:#222;
  border-color:#d0d5dd;
}
html:not(.dark-mode) .keypad .tab{ background:#e3e7ee; }
html:not(.dark-mode) .keypad .danger{ background:#ffdfe0; color:#7a1c1c; }
html:not(.dark-mode) .keypad .op{ background:#e3e7ee; }
html:not(.dark-mode) .keypad .equal{
  background:#a8c6ff; color:#0b1220;
}

/* 다크모드 경계 */
html.dark-mode .calc-card{ border-color:#444; }
html.dark-mode .display{ border-color:#444; }