zerocodejs 1.0.1-beta.0

package/dist/css/common.css

@@ -0,0 +1,677 @@
+/**
+ * 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;
+  }
+}