.countdown {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.countdown__title {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  font-weight: 800;
  color: #0f172a;
}

.countdown__target-datetime {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: -0.9rem 0 0;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, .08);
  border: 1px solid rgba(79, 70, 229, .18);
  font-size: clamp(.85rem, 2.5vw, 1rem);
  font-weight: 700;
  color: #4338ca;
}

.countdown__target-datetime svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: currentColor;
}

.countdown-sources {
  width: min(720px, calc(100% - 2rem));
  margin: 1.25rem auto 0;
  padding: .9rem 1rem;
  border: 1px solid rgba(100, 116, 139, .25);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .7);
}

.countdown-sources h2 {
  margin: 0 0 .45rem;
  font-size: .95rem;
}

.countdown-sources ul {
  margin: 0;
  padding-left: 1.2rem;
}

.countdown-sources li + li {
  margin-top: .3rem;
}

.countdown-sources a {
  overflow-wrap: anywhere;
}

.countdown[data-theme="dark"] .countdown__target-datetime {
  background: rgba(56, 189, 248, .12);
  border-color: rgba(56, 189, 248, .3);
  color: #38bdf8;
}

.countdown[data-theme="warm"] .countdown__target-datetime {
  background: rgba(234, 88, 12, .1);
  border-color: rgba(234, 88, 12, .25);
  color: #ea580c;
}

.countdown[data-theme="ocean"] .countdown__target-datetime {
  background: rgba(8, 145, 178, .1);
  border-color: rgba(8, 145, 178, .25);
  color: #0891b2;
}

.countdown[data-theme="forest"] .countdown__target-datetime {
  background: rgba(22, 101, 52, .1);
  border-color: rgba(22, 101, 52, .25);
  color: #166534;
}

.countdown[data-theme="sakura"] .countdown__target-datetime {
  background: rgba(219, 39, 119, .1);
  border-color: rgba(219, 39, 119, .24);
  color: #be185d;
}

.countdown[data-theme="sunset"] .countdown__target-datetime {
  background: rgba(217, 119, 6, .12);
  border-color: rgba(217, 119, 6, .28);
  color: #b45309;
}

.countdown[data-theme="neon"] .countdown__target-datetime {
  background: rgba(34, 211, 238, .12);
  border-color: rgba(34, 211, 238, .35);
  color: #06b6d4;
}

.countdown[data-theme="classic"] .countdown__target-datetime {
  background: rgba(120, 53, 15, .1);
  border-color: rgba(120, 53, 15, .25);
  color: #78350f;
}

.countdown[data-theme="mono"] .countdown__target-datetime {
  background: rgba(63, 63, 70, .1);
  border-color: rgba(63, 63, 70, .25);
  color: #3f3f46;
}

.countdown__display {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 5.5rem;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 14px 34px -18px rgba(15, 23, 42, .35);
}

.countdown__value {
  font-size: clamp(2rem, 8vw, 3.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #4f46e5;
  line-height: 1;
}

.countdown__label {
  font-size: .8rem;
  font-weight: 700;
  color: #64748b;
}

.countdown__end-message {
  margin: 0;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 800;
  color: #0f172a;
}

/* --- テーマバリアント --- */
.countdown[data-theme="dark"] .countdown__unit {
  background: #0f172a;
  border-color: #1e293b;
}

.countdown[data-theme="dark"] .countdown__value {
  color: #38bdf8;
}

.countdown[data-theme="dark"] .countdown__label {
  color: #94a3b8;
}

.countdown[data-theme="warm"] .countdown__value {
  color: #ea580c;
}

.countdown[data-theme="warm"] .countdown__unit {
  border-color: #fed7aa;
}

.countdown[data-theme="ocean"] .countdown__value {
  color: #0891b2;
}

.countdown[data-theme="ocean"] .countdown__unit {
  border-color: #a5f3fc;
}

.countdown[data-theme="forest"] .countdown__value {
  color: #166534;
}

.countdown[data-theme="forest"] .countdown__unit {
  border-color: #bbf7d0;
  background: #f7fee7;
}

.countdown[data-theme="sakura"] .countdown__value {
  color: #db2777;
}

.countdown[data-theme="sakura"] .countdown__unit {
  border-color: #fbcfe8;
  background: #fff1f2;
}

.countdown[data-theme="sunset"] .countdown__value {
  color: #d97706;
}

.countdown[data-theme="sunset"] .countdown__unit {
  border-color: #fde68a;
  background: #fffbeb;
}

.countdown[data-theme="neon"] .countdown__unit {
  background: #111827;
  border-color: #22d3ee;
  box-shadow: 0 16px 36px -18px rgba(34, 211, 238, .7);
}

.countdown[data-theme="neon"] .countdown__value {
  color: #22d3ee;
  text-shadow: 0 0 14px rgba(34, 211, 238, .55);
}

.countdown[data-theme="neon"] .countdown__label {
  color: #a7f3d0;
}

.countdown[data-theme="classic"] .countdown__value {
  color: #78350f;
}

.countdown[data-theme="classic"] .countdown__unit {
  border-color: #d6d3d1;
  background: #fafaf9;
  box-shadow: 0 12px 28px -20px rgba(87, 83, 78, .45);
}

.countdown[data-theme="mono"] .countdown__value {
  color: #18181b;
}

.countdown[data-theme="mono"] .countdown__unit {
  border-color: #a1a1aa;
  background: #f4f4f5;
  box-shadow: none;
}

@media (max-width: 480px) {
  .countdown__unit {
    min-width: 4.4rem;
    padding: .9rem 1rem;
  }
}

/* --- シェア／埋め込みボタン --- */
.countdown-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .5rem;
}

.countdown-primary-action {
  display: flex;
  justify-content: center;
  margin: 1.2rem 0 1.5rem;
}

.countdown-primary-action .button {
  padding: .7rem 1.35rem;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 14px 28px -18px rgba(15, 23, 42, .65);
}

.countdown-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.countdown-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #334155;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  font: inherit;
}

.countdown-share__btn svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  fill: currentColor;
}

.countdown-share__btn:hover,
.countdown-share__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .45);
}

.countdown-share__btn--x,
.countdown-share__btn--line,
.countdown-share__btn--facebook {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  padding: 0;
}

.countdown-share__btn--x {
  background: #000;
  border-color: #000;
  color: #fff;
}

.countdown-share__btn--line {
  background: rgba(6, 199, 85, .12);
  border-color: rgba(6, 199, 85, .4);
  color: #06c755;
}

.countdown-share__btn--facebook {
  background: rgba(24, 119, 242, .12);
  border-color: rgba(24, 119, 242, .4);
  color: #1877f2;
}

.countdown-share__btn--windows,
.countdown-share__btn--copy,
.countdown-share__btn--embed {
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}

.countdown-share__btn--windows {
  background: rgba(0, 120, 215, .12);
  border-color: rgba(0, 120, 215, .35);
  color: #0078d7;
}

.countdown-share__btn-label {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .countdown-share {
    gap: .5rem;
  }

  .countdown-share__btn--windows .countdown-share__btn-label,
  .countdown-share__btn--copy .countdown-share__btn-label,
  .countdown-share__btn--embed .countdown-share__btn-label {
    display: none;
  }

  .countdown-share__btn--windows,
  .countdown-share__btn--copy,
  .countdown-share__btn--embed {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border-radius: 999px;
  }
}

/* --- 埋め込みモーダル --- */
.countdown-modal[hidden] {
  display: none;
}

.countdown-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}

.countdown-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}

.countdown-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .5);
}

.countdown-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
}

.countdown-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

.countdown-modal__close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  padding: .2rem .4rem;
}

.countdown-modal__textarea {
  width: 100%;
  min-height: 6.5rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.5;
  padding: .7rem .8rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
}

.countdown-modal__copy {
  margin-top: .8rem;
  border: none;
  border-radius: 999px;
  padding: .6rem 1.3rem;
  background: #4f46e5;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.countdown-modal__note {
  margin: .8rem 0 0;
  font-size: .75rem;
  color: #64748b;
  line-height: 1.5;
}

.countdown-help-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.25rem; margin-top: .8rem; }
.countdown-share-help, .countdown-timing-help { margin: 0; color: #64748b; font-size: .82rem; }
.countdown-return { display: flex; justify-content: center; margin: 1.2rem 0 .25rem; }
.countdown-help { position: relative; display: inline-flex; vertical-align: middle; }
.countdown-help__button { width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid #94a3b8; border-radius: 50%; background: #fff; color: #334155; font-weight: 800; cursor: help; }
.countdown-help__content { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + .45rem); width: min(20rem, 78vw); padding: .65rem .75rem; border-radius: .5rem; background: #0f172a; color: #fff; line-height: 1.5; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(15,23,42,.25); }
.countdown-embed-help { margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; background: #eef2ff; color: #312e81; }
.countdown-embed-help h3 { margin: 0 0 .4rem; font-size: .9rem; }
.countdown-embed-help ol { margin: 0; padding-left: 1.2rem; font-size: .8rem; }
[x-cloak] { display: none !important; }

@media (max-width: 640px) {
  .countdown-help-row { align-items: center; flex-direction: column; }
  .countdown-return .button { width: 100%; text-align: center; }
}