{"id":16,"date":"2026-03-17T23:36:41","date_gmt":"2026-03-17T15:36:41","guid":{"rendered":"https:\/\/drone.jiia.studio\/?page_id=16"},"modified":"2026-03-17T23:45:23","modified_gmt":"2026-03-17T15:45:23","slug":"index","status":"publish","type":"page","link":"https:\/\/drone.jiia.studio\/","title":{"rendered":"index"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700;800&display=swap');\n\n:root {\n  \/* \u57fa\u672c\u8272\u5f69\uff1a\u53c3\u8003\u793a\u610f\u9801\u7684\u6dfa\u8272\uff0b\u85cd\u7da0\u7cfb *\/\n  --bg: #f4f7fb;\n  --surface: #ffffff;\n  --surface2: #ffffff;\n  --accent: #008bb9;      \/* \u4e3b\u85cd\u7da0\u8272\uff08\u6a19\u984c\uff0f\u6309\u9215\uff09 *\/\n  --accent2: #35bcd6;     \/* \u8f14\u52a9\u4eae\u85cd\u7da0\uff08\u6f38\u5c64\uff0f\u9ede\u7db4\uff09 *\/\n  --green: #2bb673;\n  --yellow: #f9b234;\n  --red: #f05b4f;\n  --text: #263238;\n  --text-muted: #71829a;\n  --border: rgba(0,0,0,0.06);\n  --radius: 18px;\n  --shadow: 0 10px 30px rgba(15,41,74,0.12);\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n  background: var(--bg);\n  color: var(--text);\n  font-family: 'Noto Sans TC', sans-serif;\n  min-height: 100vh;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px 56px;\n  background-image:\n    linear-gradient(180deg, #e0f3ff 0%, #f4f7fb 40%, #f4f7fb 100%);\n}\n\n.app {\n  width: 100%;\n  max-width: 1220px;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n}\n\n\/* HEADER *\/\n.header {\n  border-radius: 999px;\n  padding: 10px 20px;\n  background: #ffffff;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.04);\n}\n.header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n.logo {\n  font-family: 'JetBrains Mono', monospace;\n  font-weight: 800;\n  font-size: 1rem;\n  color: #ffffff;\n  background: linear-gradient(90deg, #008bb9, #35bcd6);\n  padding: 6px 16px;\n  border-radius: 999px;\n  letter-spacing: 3px;\n}\n.header-titles {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.title-main {\n  font-weight: 700;\n  font-size: 1.05rem;\n  color: var(--text);\n}\n.title-sub {\n  font-size: 0.78rem;\n  color: var(--text-muted);\n  font-family: 'JetBrains Mono', monospace;\n  letter-spacing: 0.5px;\n}\n.progress-wrap {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n#progress-text {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 0.78rem;\n  color: var(--text-muted);\n  white-space: nowrap;\n}\n.progress-bar {\n  width: 120px;\n  height: 3px;\n  background: var(--surface2);\n  border-radius: 2px;\n  overflow: hidden;\n}\n.progress-fill {\n  height: 100%;\n  background: linear-gradient(90deg, var(--accent), var(--accent2));\n  border-radius: 2px;\n  transition: width 0.5s ease;\n}\n\n\/* CARD *\/\n.card-area { perspective: 1400px; }\n\n.card {\n  width: 100%;\n  height: 380px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.card-inner {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  transform-style: preserve-3d;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  border-radius: var(--radius);\n}\n\n.card-inner.flipped { transform: rotateY(180deg); }\n\n.card-front,\n.card-back {\n  position: absolute;\n  inset: 0;\n  backface-visibility: hidden;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  box-shadow: var(--shadow);\n  padding: 32px 40px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n\/* FRONT *\/\n.card-front {\n  background: var(--surface);\n  background-image:\n    linear-gradient(180deg, #f5fbff 0%, #ffffff 45%, #ffffff 100%);\n  align-items: center;\n  text-align: center;\n  gap: 14px;\n}\n\n.front-badge {\n  position: absolute;\n  top: 20px;\n  left: 24px;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 1rem;\n  font-weight: 700;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color: var(--accent);\n  background: rgba(0,139,185,0.08);\n  padding: 4px 12px;\n  border-radius: 999px;\n  border: 1px solid rgba(0,139,185,0.22);\n}\n\n.abbr-wrap {\n  background: #ffffff;\n  border: 2px solid rgba(0,139,185,0.2);\n  border-radius: 18px;\n  width: 110px;\n  height: 110px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.abbr {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 2.6rem;\n  font-weight: 800;\n  color: var(--accent);\n  letter-spacing: 2px;\n}\n\n.zh-name {\n  font-size: 1.6rem;\n  font-weight: 900;\n  color: var(--text);\n  letter-spacing: 1px;\n}\n\n.en-name {\n  font-size: 0.95rem;\n  color: var(--text-muted);\n  font-weight: 500;\n}\n\n.flip-hint {\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  font-size: 0.7rem;\n  color: var(--text-muted);\n  opacity: 0.5;\n  font-family: 'JetBrains Mono', monospace;\n}\n\n\/* BACK *\/\n.card-back {\n  background: #ffffff;\n  background-image:\n    linear-gradient(180deg, #f5fbff 0%, #ffffff 40%, #ffffff 100%);\n  transform: rotateY(180deg);\n  gap: 18px;\n  justify-content: flex-start;\n  padding-top: 36px;\n}\n\n.back-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.back-label {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 0.8rem;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color: var(--text-muted);\n}\n\n.back-summary {\n  font-size: 1.2rem;\n  line-height: 1.7;\n  color: var(--text);\n}\n\n.counts-wrap {\n  display: flex;\n  gap: 10px;\n}\n\n.count-badge {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 1rem;\n  padding: 4px 12px;\n  border-radius: 6px;\n  font-weight: 400;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.count-badge b { font-size: 1rem; font-weight: 800; }\n\n.count-badge.l1 {\n  background: rgba(88,166,255,0.1);\n  color: var(--accent);\n  border: 1px solid rgba(88,166,255,0.2);\n}\n.count-badge.l2 {\n  background: rgba(63,185,80,0.1);\n  color: var(--green);\n  border: 1px solid rgba(63,185,80,0.2);\n}\n.count-badge.l3 {\n  background: rgba(240,192,64,0.1);\n  color: var(--accent2);\n  border: 1px solid rgba(240,192,64,0.2);\n}\n\n.back-mnemonic {\n  font-size: 1.05rem;\n  font-weight: 700;\n  color: var(--accent2);\n  line-height: 1.5;\n}\n\n\/* CONTROLS *\/\n.controls {\n  display: flex;\n  gap: 12px;\n  justify-content: center;\n  margin: 10px 0;\n}\n\n.btn {\n  font-family: 'Noto Sans TC', sans-serif;\n  font-size: 0.9rem;\n  font-weight: 700;\n  padding: 11px 22px;\n  border-radius: 10px;\n  border: none;\n  cursor: pointer;\n  transition: all 0.18s ease;\n}\n.btn:disabled { opacity: 0.25; cursor: not-allowed; }\n\n.btn-prev, .btn-next {\n  background: #ffffff;\n  color: var(--text-muted);\n  border: 1px solid var(--border);\n}\n.btn-prev:not(:disabled):hover,\n.btn-next:not(:disabled):hover {\n  background: #f1f5fb;\n  color: var(--accent);\n}\n\n.btn-flip {\n  background: linear-gradient(90deg, #008bb9, #35bcd6);\n  color: #ffffff;\n  padding: 11px 40px;\n  font-weight: 900;\n  box-shadow: 0 4px 12px rgba(0,139,185,0.3);\n}\n.btn-flip:hover {\n  background: linear-gradient(90deg, #009dcc, #45cbe2);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 18px rgba(0,139,185,0.35);\n}\n\n\/* DOT NAV *\/\n.dot-nav {\n  display: flex;\n  justify-content: center;\n  gap: 7px;\n  flex-wrap: wrap;\n}\n.dot {\n  width: 8px; height: 8px;\n  border-radius: 50%;\n  background: #e0e7f0;\n  border: 1px solid rgba(0,0,0,0.04);\n  cursor: pointer;\n  transition: all 0.25s ease;\n  margin: 10px 0;\n}\n.dot.active {\n  background: var(--accent);\n  border-color: var(--accent);\n  transform: scale(1.4);\n  margin: 10px 0;\n}\n.dot.seen {\n  background: #b5c4da;\n  border-color: #b5c4da;\n\n}\n\n\/* DOMAIN INDEX *\/\n.domain-index {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: center;\n  padding-top: 8px;\n  border-top: 1px solid rgba(0,0,0,0.04);\n}\n.domain-chip {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 0.75rem;\n  font-weight: 700;\n  padding: 4px 12px;\n  border-radius: 6px;\n  border: 1px solid rgba(0,0,0,0.06);\n  background: #ffffff;\n  color: var(--text-muted);\n  cursor: pointer;\n  transition: all 0.18s;\n  letter-spacing: 1px;\n}\n.domain-chip:hover {\n  background: #f1f7ff;\n  color: var(--accent);\n  border-color: rgba(0,139,185,0.25);\n}\n.domain-chip.active {\n  background: rgba(0,139,185,0.12);\n  color: var(--accent);\n  border-color: rgba(0,139,185,0.45);\n}\n\n\n<\/style>\n\n\n\n  <div class=\"app\">\n\n    <header class=\"header\">\n      <div class=\"header-inner\">\n        <div class=\"header-left\">\n          <span class=\"logo\">CMMC<\/span>\n          <div class=\"header-titles\">\n            <span class=\"title-main\">Domain \u7e3d\u89bd<\/span>\n            <span class=\"title-sub\">\u7b2c\u4e00\u7d44 \u00b7 14 \u5f35 \u00b7 \u5168\u54e1\u5fc5\u77e5<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"progress-wrap\">\n          <span id=\"progress-text\">1 \/ 14<\/span>\n          <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progress-fill\"><\/div><\/div>\n        <\/div>\n      <\/div>\n    <\/header>\n\n    <main class=\"main\">\n\n      <div class=\"card-area\">\n        <div class=\"card\" id=\"card\">\n          <div class=\"card-inner\" id=\"card-inner\">\n\n            <!-- \u6b63\u9762 -->\n            <div class=\"card-front\">\n              <div class=\"front-badge\" id=\"front-badge\">\u7b2c\u4e00\u7d44<\/div>\n              <div class=\"abbr-wrap\">\n                <span class=\"abbr\" id=\"abbr\">AC<\/span>\n              <\/div>\n              <div class=\"zh-name\" id=\"zh-name\">\u5b58\u53d6\u63a7\u5236<\/div>\n              <div class=\"en-name\" id=\"en-name\">Access Control<\/div>\n              <div class=\"flip-hint\">\u9ede\u64ca\u7ffb\u9762 \u00b7 \u7a7a\u767d\u9375<\/div>\n            <\/div>\n\n            <!-- \u80cc\u9762 -->\n            <div class=\"card-back\">\n              <div class=\"back-section\">\n                <div class=\"back-label\">\u9019\u500b Domain \u5728\u7ba1\u4ec0\u9ebc<\/div>\n                <div class=\"back-summary\" id=\"back-summary\">\u2014<\/div>\n              <\/div>\n              <div class=\"back-section\">\n                <div class=\"back-label\">\u9700\u6c42\u689d\u6578<\/div>\n                <div class=\"counts-wrap\" id=\"counts-wrap\">\n                  <span class=\"count-badge l1\">L1 <b id=\"c-l1\">0<\/b><\/span>\n                  <span class=\"count-badge l2\">L2 <b id=\"c-l2\">0<\/b><\/span>\n                  <span class=\"count-badge l3\">L3 <b id=\"c-l3\">0<\/b><\/span>\n                <\/div>\n              <\/div>\n              <div class=\"back-section\">\n                <div class=\"back-label\">\u8a18\u61b6\u53e3\u8a23<\/div>\n                <div class=\"back-mnemonic\" id=\"back-mnemonic\">\u2014<\/div>\n              <\/div>\n              <div class=\"flip-hint\">\u9ede\u64ca\u7ffb\u56de \u00b7 \u7a7a\u767d\u9375<\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"controls\">\n        <button class=\"btn btn-prev\" id=\"btn-prev\" disabled>\u2190 \u4e0a\u4e00\u984c<\/button>\n        <button class=\"btn btn-flip\" id=\"btn-flip\">\u7ffb\u8f49\u5361\u7247<\/button>\n        <button class=\"btn btn-next\" id=\"btn-next\">\u4e0b\u4e00\u984c \u2192<\/button>\n      <\/div>\n\n      <div class=\"dot-nav\" id=\"dot-nav\"><\/div>\n\n      <div class=\"domain-index\" id=\"domain-index\"><\/div>\n\n    <\/main>\n  <script src=\"\/cmmc\/cards.js\"><\/script>\n  <script src=\"\/cmmc\/app.js\"><\/script>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>CMMC Domain \u7e3d\u89bd \u7b2c\u4e00\u7d44 \u00b7 14 \u5f35 \u00b7 \u5168\u54e1\u5fc5\u77e5 1 \/ 14 \u7b2c\u4e00\u7d44 AC \u5b58\u53d6\u63a7\u5236 Acc [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":3,"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/drone.jiia.studio\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}