zerocodejs 1.0.1-beta.1 → 1.0.1-beta.10

package/dist/css/common.css

@@ -1,677 +0,0 @@
-/**
- * ZeroCode.js - 共通CSS
- * リセットCSS + 共通スタイル
- */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');
-
-/* ========================================
-   CSS Reset
-   ======================================== */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  -webkit-text-size-adjust: 100%;
-  -moz-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family:
-    'Inter',
-    'Noto Sans JP',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Hiragino Sans',
-    'Hiragino Kaku Gothic ProN',
-    'Yu Gothic',
-    'Meiryo',
-    sans-serif;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  container-type: inline-size;
-  container-name: viewport;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-ul,
-ol {
-  list-style: none;
-}
-
-a {
-  text-decoration: none;
-  color: inherit;
-}
-
-button {
-  font-family: inherit;
-  font-size: inherit;
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-input,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-/* ========================================
-共通レイアウト(BEM / l-*)
-======================================== */
-
-.l-header,
-.l-footer {
-  padding: 20px;
-  border-radius: 0;
-  color: white;
-  text-align: center;
-}
-
-.l-header h1,
-.l-footer h1 {
-  margin: 0 0 10px 0;
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.l-header p,
-.l-footer p {
-  margin: 0;
-  opacity: 0.9;
-  font-size: 14px;
-}
-/* CMS用ヘッダーとフッター */
-.l-header--cms,
-.l-footer--cms {
-  background: #3498db;
-}
-
-/* Dev（エンジニア用） */
-.l-header--dev,
-.l-footer--dev {
-  background: #e67e22;
-}
-
-/* Light DOM */
-.l-header--light-dom,
-.l-footer--light-dom {
-  background: #16a085;
-}
-
-/* Preview（表示専用） */
-.l-header--preview,
-.l-footer--preview {
-  background: #9b59b6;
-}
-
-/* Pub（公開用） */
-.l-header--pub,
-.l-footer--pub {
-  background: #27ae60;
-}
-
-/* SSR（SSR比較） */
-.l-header--ssr,
-.l-footer--ssr {
-  background: #2ecc71;
-}
-
-.l-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
-  container-type: inline-size;
-  container-name: page;
-}
-
-/* ========================================
-共通パーツ（BEM / c-*）
-======================================== */
-
-:root {
-  --c-color-black: #0b1220;
-  --c-color-white: #fff;
-  --c-color-red: #2563eb;
-  --c-color-gray: #64748b;
-  --c-color-gray-2: rgba(15, 23, 42, 0.14);
-  --c-color-bg-soft: rgba(15, 23, 42, 0.03);
-  --c-radius: 12px;
-  --c-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
-  --c-transition: 160ms ease;
-}
-
-.c-heading {
-  margin-top: 40px;
-  margin-bottom: 22px;
-}
-
-.c-heading__title {
-  overflow: hidden;
-  position: relative;
-  color: var(--c-color-black);
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-
-.c-heading--h1 .c-heading__title {
-  font-size: 36px;
-  line-height: 1.25;
-  padding-bottom: 14px;
-}
-
-.c-heading--h1 .c-heading__title::before {
-  content: '';
-  position: absolute;
-  bottom: 2px;
-  left: 0;
-  width: 96px;
-  height: 2px;
-  background-color: rgba(11, 18, 32, 0.7);
-}
-
-.c-heading--h1 .c-heading__title::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 28px;
-  height: 3px;
-  background-color: var(--c-color-red);
-}
-
-.c-heading--h2 .c-heading__title {
-  font-size: 28px;
-  line-height: 1.3;
-  padding-bottom: 12px;
-}
-
-.c-heading--h2 .c-heading__title::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 52px;
-  height: 2px;
-  background-color: var(--c-color-red);
-}
-
-.c-heading--h3 .c-heading__title {
-  font-size: 20px;
-  line-height: 1.35;
-}
-
-.c-heading--h4 .c-heading__title {
-  font-size: 18px;
-  line-height: 1.4;
-}
-
-.c-heading--h5 .c-heading__title {
-  font-size: 16px;
-  line-height: 1.45;
-}
-
-.c-heading--h6 .c-heading__title {
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.c-text {
-  margin-top: 24px;
-  color: var(--c-color-gray);
-  font-size: 16px;
-  line-height: 1.8;
-}
-
-.c-text p + p {
-  margin-top: 0.769em;
-}
-
-.c-box {
-  margin-top: 24px;
-  border: 1px solid var(--c-color-gray-2);
-  background-color: var(--c-color-white);
-  border-radius: var(--c-radius);
-  box-shadow: var(--c-shadow);
-}
-
-.c-box__inner {
-  padding: 24px;
-}
-
-.c-box__heading {
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 1.5;
-  margin-bottom: 14px;
-  color: var(--c-color-black);
-}
-
-.c-box__body {
-  font-size: 16px;
-  line-height: 1.8;
-  color: var(--c-color-gray);
-}
-
-.c-box--tone-neutral {
-  border-color: var(--c-color-gray-2);
-  background-color: var(--c-color-white);
-}
-
-.c-box--tone-primary {
-  border-color: rgba(37, 99, 235, 0.35);
-  background-color: rgba(37, 99, 235, 0.06);
-}
-
-.c-box--tone-accent {
-  border-color: rgba(15, 23, 42, 0.12);
-  background-color: rgba(15, 23, 42, 0.03);
-}
-
-.c-media {
-  margin-top: 24px;
-  display: flex;
-  gap: 24px;
-  align-items: center;
-  border: 1px solid var(--c-color-gray-2);
-  background-color: var(--c-color-white);
-  padding: 24px;
-  border-radius: var(--c-radius);
-  box-shadow: var(--c-shadow);
-}
-
-.c-media--dir-reverse {
-  flex-direction: row-reverse;
-}
-
-.c-media--valign-top {
-  align-items: flex-start;
-}
-
-.c-media--valign-center {
-  align-items: center;
-}
-
-.c-media--valign-bottom {
-  align-items: flex-end;
-}
-
-.c-media__image {
-  flex: 0 0 auto;
-  width: 42%;
-  max-width: 520px;
-}
-
-.c-media__img {
-  width: 100%;
-  height: auto;
-  border: 1px solid var(--c-color-gray-2);
-  background: var(--c-color-white);
-  border-radius: calc(var(--c-radius) - 4px);
-}
-
-.c-media__content {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.c-media__heading {
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  color: var(--c-color-black);
-}
-
-.c-media__text {
-  font-size: 16px;
-  line-height: 1.8;
-  color: var(--c-color-gray);
-}
-
-.c-media__actions {
-  margin-top: 20px;
-}
-
-.c-image {
-  margin-top: 50px;
-  margin-bottom: 50px;
-  display: block;
-}
-
-.c-image__media {
-  overflow: hidden;
-  border: 1px solid var(--c-color-gray-2);
-  background: var(--c-color-white);
-  border-radius: var(--c-radius);
-}
-
-.c-image__img {
-  width: 100%;
-  height: auto;
-}
-
-.c-image__caption {
-  margin-top: 10px;
-  color: var(--c-color-gray);
-  font-size: 13px;
-  line-height: 1.692;
-}
-
-.c-image--align-left {
-  text-align: left;
-}
-
-.c-image--align-center {
-  text-align: center;
-}
-
-.c-image--align-right {
-  text-align: right;
-}
-
-.c-table {
-  margin-top: 24px;
-  border: 1px solid var(--c-color-gray-2);
-  background: var(--c-color-white);
-  border-radius: var(--c-radius);
-  overflow: hidden;
-  box-shadow: var(--c-shadow);
-}
-
-.c-table__caption {
-  padding: 14px 16px;
-  color: var(--c-color-gray);
-  font-size: 14px;
-  line-height: 1.5;
-  border-bottom: 1px solid var(--c-color-gray-2);
-}
-
-.c-table__row {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-}
-
-.c-table__cell {
-  padding: 15px;
-  color: var(--c-color-black);
-  font-size: 14px;
-  line-height: 1.5;
-  border-bottom: 1px solid var(--c-color-gray-2);
-  border-right: 1px solid var(--c-color-gray-2);
-  min-width: 0;
-  background: var(--c-color-white);
-}
-
-.c-table__row > .c-table__cell:last-child {
-  border-right: none;
-}
-
-.c-table__cell--head {
-  font-weight: 700;
-  color: var(--c-color-white);
-  background: var(--c-color-black);
-}
-
-.c-table__cell--align-left {
-  text-align: left;
-}
-
-.c-table__cell--align-center {
-  text-align: center;
-}
-
-.c-table__cell--align-right {
-  text-align: right;
-}
-
-.c-table--style-striped .c-table__body .c-table__row:nth-child(even) .c-table__cell {
-  background: var(--c-color-bg-soft);
-}
-
-.c-table--style-bordered .c-table__cell {
-  border-color: rgba(15, 23, 42, 0.2);
-}
-
-.c-actions {
-  display: block;
-}
-
-.c-actions--align-left {
-  text-align: left;
-}
-
-.c-actions--align-center {
-  text-align: center;
-}
-
-.c-actions--align-right {
-  text-align: right;
-}
-
-.c-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: auto;
-  min-height: 44px;
-  padding: 10px 14px;
-  border-radius: 10px;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 1.5;
-  background-color: var(--c-color-white);
-  border: 1px solid var(--c-color-gray-2);
-  transition: var(--c-transition);
-  color: var(--c-color-black);
-}
-
-.c-button--style-primary {
-  background-color: var(--c-color-red);
-  border-color: var(--c-color-red);
-  color: var(--c-color-white);
-}
-
-.c-button--style-primary:hover {
-  background-color: #1d4ed8;
-  border-color: #1d4ed8;
-}
-
-.c-button--style-secondary {
-  border-color: rgba(37, 99, 235, 0.35);
-  color: var(--c-color-red);
-  background-color: rgba(37, 99, 235, 0.06);
-}
-
-.c-button--style-secondary:hover {
-  background-color: rgba(37, 99, 235, 0.1);
-}
-
-.c-button--style-text {
-  border-color: transparent;
-  background-color: transparent;
-  width: auto;
-  min-height: auto;
-  padding: 0;
-  text-decoration: underline;
-  color: var(--c-color-red);
-}
-
-.c-link {
-  position: relative;
-  font-weight: 700;
-  color: var(--c-color-red);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  transition: var(--c-transition);
-}
-
-.c-link:hover {
-  color: #1d4ed8;
-}
-
-@container viewport (max-width: 640px) {
-  .l-container {
-    padding: 28px 16px;
-  }
-
-  .c-heading {
-    margin-top: 40px;
-    margin-bottom: 30px;
-  }
-
-  .c-heading--h1 .c-heading__title {
-    font-size: 28px;
-    padding-bottom: 12px;
-  }
-
-  .c-heading--h2 .c-heading__title {
-    font-size: 22px;
-    padding-bottom: 12px;
-  }
-
-  .c-heading--h3 .c-heading__title {
-    font-size: 18px;
-  }
-
-  .c-heading--h4 .c-heading__title {
-    font-size: 16px;
-  }
-
-  .c-heading--h5 .c-heading__title {
-    font-size: 14px;
-  }
-
-  .c-heading--h6 .c-heading__title {
-    font-size: 13px;
-  }
-
-  .c-media {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .c-media__image {
-    width: 100%;
-    max-width: none;
-  }
-
-  .c-box__inner {
-    padding: 20px;
-  }
-
-  .c-image {
-    margin-top: 30px;
-    margin-bottom: 30px;
-  }
-}
-
-/* リセットボタン（保存ボタンの横に配置） */
-.reset-controls-fixed {
-  position: fixed;
-  bottom: 20px;
-  left: 160px; /* 保存ボタンの右側に配置（保存ボタンの幅 + gapを考慮） */
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 20px;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-  backdrop-filter: blur(6px);
-}
-
-.reset-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: background-color 0.2s;
-  white-space: nowrap;
-}
-
-.reset-btn:hover {
-  background-color: #c82333;
-}
-
-.reset-btn:active {
-  background-color: #bd2130;
-}
-
-.reset-btn svg {
-  flex-shrink: 0;
-}
-
-/* モバイル対応 */
-@media (max-width: 768px) {
-  .reset-controls-fixed {
-    bottom: 20px;
-    left: 72px; /* 保存ボタン（48px）の右側に配置、gap: 8px */
-    padding: 0;
-    background: transparent;
-    box-shadow: none;
-  }
-
-  .reset-btn {
-    width: 48px;
-    height: 48px;
-    padding: 0;
-    border-radius: 50%;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
-  }
-
-  .reset-btn span {
-    display: none;
-  }
-
-  .reset-btn svg {
-    width: 20px;
-    height: 20px;
-  }
-}