careermate 0.0.3 → 0.0.5

package/dist/site/style.css

@@ -28,28 +28,32 @@
 }
 
 :root {
-  /* warm paper neutrals (light) */
-  --bg: #faf8f4;
+  /* quiet green-neutral system (light) */
+  --bg: #f7f8f5;
   --bg-elev: #ffffff;
-  --bg-subtle: #f2efe8;
-  --bg-sunken: #ece8df;
+  --bg-subtle: #eef3ed;
+  --bg-sunken: #e8ede8;
   --surface: #ffffff;
-  --surface-hover: #f5f2ec;
-  --border: #e6e1d6;
-  --border-strong: #d6d0c2;
-  --text: #1c1a16;
-  --text-secondary: #595449;
-  --text-tertiary: #8b867a;
-
-  /* single flat accent — deep emerald (growth / "proceed"), no gradient */
+  --surface-hover: #f1f5f0;
+  --border: #dfe5dc;
+  --border-strong: #cbd5ca;
+  --text: #171a16;
+  --text-secondary: #50584f;
+  --text-tertiary: #7d877b;
+
+  /* signature accent — deep emerald, kept from the existing product */
   --accent: #0f7256;
   --accent-hover: #0b5b44;
   --accent-soft: #e7f1ec;
   --accent-border: #bcdccd;
   --text-on-accent: #ffffff;
+  --support-blue: #2f6fed;
+  --support-blue-soft: #edf4ff;
+  --support-amber: #b46917;
+  --support-amber-soft: #fff5e7;
 
-  --code-bg: #f4f1ea;
-  --code-text: #2a2722;
+  --code-bg: #f2f5ef;
+  --code-text: #20261f;
   --warn-bg: #fbf3e3;
   --warn-border: #ecd9ac;
   --warn-text: #876214;
@@ -74,23 +78,27 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
-    --bg: #14130f; --bg-elev: #1b1915; --bg-subtle: #201d17; --bg-sunken: #100f0b;
-    --surface: #1b1915; --surface-hover: #262219;
-    --border: #2e2a22; --border-strong: #3e3930;
-    --text: #f2eee5; --text-secondary: #aaa599; --text-tertiary: #79746a;
+    --bg: #111513; --bg-elev: #171c19; --bg-subtle: #1d241f; --bg-sunken: #0c100e;
+    --surface: #171c19; --surface-hover: #202822;
+    --border: #2a332e; --border-strong: #3a463f;
+    --text: #eef4ed; --text-secondary: #aab5a9; --text-tertiary: #788579;
     --accent: #34d399; --accent-hover: #6ee7b7; --accent-soft: #11281d; --accent-border: #1f4f3c; --text-on-accent: #05241a;
-    --code-bg: #100f0b; --code-text: #d6d1c6;
+    --support-blue: #75a7ff; --support-blue-soft: #10213a;
+    --support-amber: #f0b76a; --support-amber-soft: #33230e;
+    --code-bg: #0c100e; --code-text: #d9e3d7;
     --warn-bg: #292008; --warn-border: #574510; --warn-text: #e6c578;
     --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45);
   }
 }
 :root[data-theme='dark'] {
-  --bg: #14130f; --bg-elev: #1b1915; --bg-subtle: #201d17; --bg-sunken: #100f0b;
-  --surface: #1b1915; --surface-hover: #262219;
-  --border: #2e2a22; --border-strong: #3e3930;
-  --text: #f2eee5; --text-secondary: #aaa599; --text-tertiary: #79746a;
+  --bg: #111513; --bg-elev: #171c19; --bg-subtle: #1d241f; --bg-sunken: #0c100e;
+  --surface: #171c19; --surface-hover: #202822;
+  --border: #2a332e; --border-strong: #3a463f;
+  --text: #eef4ed; --text-secondary: #aab5a9; --text-tertiary: #788579;
   --accent: #34d399; --accent-hover: #6ee7b7; --accent-soft: #11281d; --accent-border: #1f4f3c;
-  --code-bg: #100f0b; --code-text: #d6d1c6;
+  --support-blue: #75a7ff; --support-blue-soft: #10213a;
+  --support-amber: #f0b76a; --support-amber-soft: #33230e;
+  --code-bg: #0c100e; --code-text: #d9e3d7;
   --warn-bg: #292008; --warn-border: #574510; --warn-text: #e6c578;
   --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45);
 }
@@ -102,7 +110,7 @@ body {
   font-family: var(--font); font-size: 16px; line-height: 1.65;
   word-break: keep-all; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
 }
-h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
+h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: 0; line-height: 1.25; }
 p { margin: 0; }
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
@@ -142,7 +150,7 @@ code { font-family: var(--mono); }
   background: var(--accent); color: var(--text-on-accent); font-weight: 800; font-size: 13px;
   display: grid; place-items: center;
 }
-.nav__name { font-size: 15.5px; font-family: var(--mono); letter-spacing: -0.02em; }
+.nav__name { font-size: 15.5px; font-family: var(--mono); letter-spacing: 0; }
 .nav__links { display: flex; gap: 2px; margin-left: 12px; }
 .nav__links a {
   color: var(--text-secondary); font-size: 14px; font-weight: 500;
@@ -196,8 +204,8 @@ code { font-family: var(--mono); }
    demo (the signature element) on the right. Left-aligned, not centered.
    Stacks to one column on narrow screens. */
 .hero {
-  max-width: var(--maxw); margin: 0 auto; padding: 72px 24px 8px;
-  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: start;
+  max-width: var(--maxw); margin: 0 auto; padding: 76px 24px 8px;
+  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start;
 }
 .hero__main { min-width: 0; }
 /* solo variant (start.html): no demo column — one left-aligned column */
@@ -217,10 +225,10 @@ code { font-family: var(--mono); }
 }
 .pill-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
 /* heavy display weight + tight tracking — strong contrast against the 400 lede */
-.hero__title { font-size: clamp(2.15rem, 4.6vw, 3.1rem); font-weight: 800; margin: 20px 0 0; letter-spacing: -0.035em; line-height: 1.1; }
+.hero__title { font-size: 3.05rem; font-weight: 800; margin: 20px 0 0; letter-spacing: 0; line-height: 1.12; }
 .hero__lede {
-  font-size: clamp(1.02rem, 1.7vw, 1.18rem); color: var(--text-secondary);
-  margin: 18px 0 0; max-width: 34rem; line-height: 1.6;
+  font-size: 1.11rem; color: var(--text-secondary);
+  margin: 18px 0 0; max-width: 33rem; line-height: 1.62;
 }
 .hero__lede strong { color: var(--text); font-weight: 650; }
 
@@ -248,39 +256,95 @@ code { font-family: var(--mono); }
 .hero__note strong { color: var(--text-secondary); font-weight: 600; }
 .hero__note code { font-family: var(--mono); font-size: .92em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; color: var(--text-secondary); }
 
-/* signature — the "내 AI에게 한 문장" install demo (the one bold idea on the page).
-   nudged down so its top sits around the headline, not the small pill kicker. */
-.hero__demo { min-width: 0; margin-top: 40px; }
+/* signature — one stable card that shows what people can ask their AI to do. */
+.hero__demo { min-width: 0; margin-top: 18px; }
 .hero__demo-note { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.55; color: var(--text-tertiary); }
-.chat {
+.command-card {
   background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md); overflow: hidden;
+  box-shadow: var(--shadow-md); overflow: hidden; min-height: 392px;
 }
-.chat__head {
-  display: flex; align-items: center; gap: 8px; padding: 10px 15px;
+.command-card__head {
+  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 15px;
   font-family: var(--mono); font-size: 12px; color: var(--text-tertiary);
   background: var(--bg-subtle); border-bottom: 1px solid var(--border);
 }
-.chat__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: none; }
-.chat__msg { padding: 15px 16px; }
-.chat__msg + .chat__msg { border-top: 1px solid var(--border); }
-.chat__who { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 7px; }
-.chat__msg--me p {
-  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--code-text);
-  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px;
+.command-card__dots { display: inline-flex; gap: 6px; flex: none; }
+.command-card__dots i { width: 9px; height: 9px; border-radius: 999px; background: var(--border-strong); }
+.command-card__title { color: var(--text-secondary); }
+.command-card__status {
+  margin-left: auto; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border);
+  border-radius: 999px; padding: 2px 9px; font-family: var(--font); font-size: 11.5px; font-weight: 650;
+}
+.command-card__file {
+  display: flex; align-items: center; gap: 10px; margin: 18px 18px 0; padding: 11px 13px;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev);
+}
+.command-card__file svg { width: 20px; height: 20px; flex: none; color: var(--support-amber); }
+.command-card__file span {
+  min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+  font-family: var(--mono); font-size: 12.5px; color: var(--text);
+}
+.command-card__file strong {
+  flex: none; color: var(--support-amber); background: var(--support-amber-soft);
+  border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 650;
+}
+.command-card__body { display: grid; gap: 12px; padding: 18px; }
+.command-card__bubble {
+  border-radius: var(--radius); border: 1px solid var(--border); padding: 13px 14px;
+  min-height: 94px; transition: opacity .24s ease, transform .24s ease;
+}
+.command-card__bubble span {
+  display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--text-tertiary);
+}
+.command-card__bubble p { font-size: 14px; line-height: 1.58; color: var(--text-secondary); }
+.command-card__bubble--user {
+  background: var(--code-bg);
+}
+.command-card__bubble--user p {
+  color: var(--code-text); font-family: var(--mono); font-size: 12.7px;
+}
+.command-card__bubble--ai {
+  margin-left: 28px; background: var(--surface);
+}
+.command-card__bubble--ai span { color: var(--accent); }
+.command-card__steps {
+  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
+  margin: 0 18px 14px; padding: 0;
+}
+.command-card__steps li { min-width: 0; }
+.command-card__steps button {
+  width: 100%; height: 28px; display: grid; place-items: center; border: 1px solid var(--border);
+  border-radius: 999px; color: var(--text-tertiary); font-family: inherit; font-size: 11.5px; font-weight: 650;
+  background: var(--bg-elev); cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease;
+}
+.command-card__steps button:hover {
+  border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft);
 }
-.chat__msg--ai p { color: var(--text-secondary); font-size: 14px; }
-.chat__steps { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 6px; }
-.chat__steps li { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
-.chat__steps li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
-.chat__steps code { font-family: var(--mono); font-size: .92em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; color: var(--text); }
+.command-card__steps button:focus-visible {
+  outline: 2px solid var(--accent); outline-offset: 2px;
+}
+.command-card__steps button.is-active {
+  color: var(--text-on-accent); background: var(--accent); border-color: var(--accent);
+}
+.command-card__progress {
+  height: 3px; background: var(--bg-subtle); overflow: hidden;
+}
+.command-card__progress span {
+  display: block; height: 100%; width: 100%; background: var(--accent);
+  transform-origin: left; animation: commandProgress 4.5s linear infinite;
+}
+.command-demo.is-changing .command-card__bubble,
+.command-demo.is-changing .command-card__file {
+  opacity: .28; transform: translateY(3px);
+}
+@keyframes commandProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
 
 /* ----------------------------------------------------------------- sections */
-.section { max-width: var(--maxw); margin: 0 auto; padding: 112px 24px 0; scroll-margin-top: 80px; }
+.section { max-width: var(--maxw); margin: 0 auto; padding: 136px 24px 0; scroll-margin-top: 80px; }
 /* left-aligned section heads (centered heads + uppercase eyebrows read as a template) */
-.section__head { max-width: 50rem; margin: 0 0 36px; }
-.section__head h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 750; letter-spacing: -0.02em; }
-.section__head p { margin-top: 12px; color: var(--text-secondary); font-size: 1.02rem; max-width: 42rem; }
+.section__head { max-width: 50rem; margin: 0 0 44px; }
+.section__head h2 { font-size: 2rem; font-weight: 750; letter-spacing: 0; }
+.section__head p { margin-top: 14px; color: var(--text-secondary); font-size: 1.02rem; max-width: 42rem; }
 .section__cta { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
 .section__cta-note { font-size: 13px; color: var(--text-tertiary, var(--text-secondary)); }
 /* Centered head for showcase/guide sections whose body is itself centered (the big
@@ -292,17 +356,17 @@ code { font-family: var(--mono); }
 
 /* how-it-works — a quiet numbered sequence, not an icon-card grid */
 .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
-.feature { padding-top: 16px; border-top: 1px solid var(--border-strong); }
+.feature { padding-top: 22px; border-top: 1px solid var(--border-strong); }
 .feature__no { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
-.feature h3 { font-size: 16px; margin: 12px 0 6px; }
-.feature p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
+.feature h3 { font-size: 16px; margin: 14px 0 8px; }
+.feature p { color: var(--text-secondary); font-size: 14px; line-height: 1.65; }
 .feature code { font-family: var(--mono); font-size: .85em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; }
 
 /* capability list — hairline rows, not boxes ("use fewer borders") */
 .checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; max-width: 880px; margin: 0; }
 .check {
   display: flex; gap: 12px; align-items: flex-start;
-  padding: 16px 0; border-bottom: 1px solid var(--border);
+  padding: 19px 0; border-bottom: 1px solid var(--border);
 }
 .check > svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }
 .check strong { display: block; font-size: 14.5px; font-weight: 650; }
@@ -380,6 +444,37 @@ code { font-family: var(--mono); }
 }
 
 /* ----------------------------------------------------------------- install */
+/* The first install view is intentionally short: three human steps, one
+   pasteable prompt, and one developer command. */
+.quick-start {
+  max-width: 840px; margin: 0 auto 18px;
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
+}
+.quick-start__step {
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 19px; min-height: 184px;
+}
+.quick-start__step span {
+  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px;
+  background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent);
+  font-weight: 750; font-size: 13px;
+}
+.quick-start__step h3 { margin-top: 13px; font-size: 16px; font-weight: 720; }
+.quick-start__step p { margin-top: 7px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
+.quick-start__step a {
+  display: inline-flex; margin-top: 10px; color: var(--accent); font-size: 13px; font-weight: 700;
+}
+.code--install { max-width: 840px; }
+.install-footnote {
+  max-width: 840px; margin: 0 auto 20px; text-align: center;
+  color: var(--text-tertiary); font-size: 13px; line-height: 1.58;
+}
+.install-footnote--label {
+  margin-bottom: 8px; color: var(--text-secondary); font-weight: 700;
+}
+.code.code--install + .install-footnote--label { margin-top: 18px; }
+.note--compact { margin-bottom: 22px; }
+
 /* install track (A: .mcpb / B: terminal) */
 .track {
   max-width: 720px; margin: 0 auto;
@@ -435,6 +530,7 @@ kbd {
   position: relative; margin: 11px 0; background: var(--code-bg);
   border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
 }
+.code.code--install { margin: 0 auto 10px; }
 .code__label {
   display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
   color: var(--text-tertiary); padding: 9px 13px 0;
@@ -538,19 +634,29 @@ kbd {
 /* responsive */
 @media (max-width: 820px) {
   .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; }
-  .hero__demo { max-width: 480px; margin-top: 0; }
+  .section { padding-top: 104px; }
+  .section__head { margin-bottom: 34px; }
+  .hero__title { font-size: 2.48rem; }
+  .section__head h2 { font-size: 1.72rem; }
+  .hero__demo { max-width: 520px; margin-top: 0; }
   .cards-3 { grid-template-columns: 1fr; gap: 24px; }
   .checks { grid-template-columns: 1fr; }
   .trouble { grid-template-columns: 1fr; }
-  /* Logo-only brand on mobile frees room to keep the guided wizard ('처음이세요?')
-     in the sticky nav without overflow; section anchors collapse, and '설치하기'
-     stays in nav__actions so install is never lost. */
+  .quick-start { grid-template-columns: 1fr; max-width: 720px; }
+  .quick-start__step { min-height: 0; }
+  /* Logo-only brand on mobile keeps the sticky nav quiet and compact. */
   .nav__name { display: none; }
   .nav__links a { display: none; }
-  .nav__links a[href="start.html"] { display: inline-flex; }
 }
 @media (max-width: 540px) {
   .hero { padding-top: 46px; }
+  .section { padding-top: 88px; }
+  .hero__title { font-size: 2.18rem; }
+  .hero__lede { font-size: 1rem; }
+  .command-card { min-height: 420px; }
+  .command-card__bubble { min-height: 108px; }
+  .command-card__bubble--ai { margin-left: 0; }
+  .command-card__steps { grid-template-columns: repeat(3, 1fr); }
   .privacy-card { flex-direction: column; gap: 15px; padding: 22px; }
 }
 @media (prefers-reduced-motion: reduce) {