/* ==========================================================================
   공지문 및 모바일 청구서 스타일 (Notice & Share CSS)
   ========================================================================== */

.notice-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .notice-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile Card Shell */
.mobile-notice-card {
  background: var(--bg-card-solid);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.notice-card-header {
  background: linear-gradient(135deg, hsl(var(--hue-primary), 85%, 55%), hsl(var(--hue-primary), 85%, 45%));
  color: #ffffff;
  padding: 24px;
  text-align: center;
}

.notice-card-header h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}

.notice-card-header p {
  font-size: 13px;
  opacity: 0.9;
}

.notice-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notice-bank-box {
  background: var(--color-primary-light);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.notice-bank-box .bank-title {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.notice-bank-box .bank-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
}

.notice-bank-box .bank-holder {
  font-size: 13px;
  color: var(--text-main);
  margin-top: 2px;
}

/* KakaoTalk Box */
.kakao-text-box {
  background: #fee500;
  color: #191919;
  border-radius: var(--radius-md);
  padding: 20px;
  font-family: monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 350px;
  overflow-y: auto;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.share-action-bar {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.share-action-bar .btn {
  flex: 1;
}