/* =============================================
   アフターピルタグ表示用CSS
   ============================================= */

/* アフターピルタグのコンテナ */
.afterpill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* アフターピルタグの基本スタイル */
.afterpill-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* デフォルト（単体表示時） */
.afterpill-default {
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid var(--primary-color);
}

/* 72時間用アフターピル */
.afterpill-72h {
  background: #E3F2FD;
  border: 1px solid #2196F3;
  color: #1565C0;
}

.afterpill-72h::before {
  content: "72h";
  font-size: 11px;
  font-weight: 700;
  background: #2196F3;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 6px;
}

/* 120時間用アフターピル */
.afterpill-120h {
  background: #F3E5F5;
  border: 1px solid #9C27B0;
  color: #6A1B9A;
}

.afterpill-120h::before {
  content: "120h";
  font-size: 11px;
  font-weight: 700;
  background: #9C27B0;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 6px;
}

/* ホバーエフェクト */
.afterpill-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* =============================================
   複数駅表示用CSS
   ============================================= */

/* 駅名の区切り文字 */
.station-separator {
  color: var(--text-secondary);
  margin: 0 8px;
  font-weight: 400;
}

/* 駅リンクが複数ある場合の調整 */
.info-row dd .station-link {
  margin-right: 2px;
}

.info-row dd .station-link:not(:last-child) {
  margin-right: 0;
}

/* =============================================
   病院カード内での表示調整
   ============================================= */

/* コンパクト表示（一覧ページ） */
.hospital-item .afterpill-tags {
  gap: 6px;
}

.hospital-item .afterpill-tag {
  font-size: 12px;
  padding: 3px 10px;
}

.hospital-item .afterpill-tag::before {
  font-size: 10px;
  padding: 1px 5px;
  margin-right: 4px;
}

/* 単体のアフターピル表示（デフォルト値） */
.hospital-item .afterpill-type > .afterpill-tag:only-child {
  margin: 0;
}

/* =============================================
   レスポンシブ対応
   ============================================= */

@media (max-width: 767px) {
  .afterpill-tags {
    gap: 6px;
  }
  
  .afterpill-tag {
    font-size: 12px;
    padding: 3px 10px;
  }
  
  .station-separator {
    margin: 0 6px;
  }
}

/* =============================================
   印刷時の対応
   ============================================= */

@media print {
  .afterpill-tag {
    border: 1px solid #000 !important;
    background: #f0f0f0 !important;
    color: #000 !important;
  }
  
  .afterpill-tag::before {
    background: #000 !important;
    color: #fff !important;
  }
  
  .station-link {
    color: #000 !important;
    text-decoration: underline !important;
  }
}