sanjang 0.3.3 → 0.3.4

package/dashboard/app.js

@@ -1241,9 +1241,22 @@ function renderWorkspace(data) {
       previewEl.querySelector('.ws-preview-fallback').style.display = 'flex';
     });
   } else {
-    previewEl.innerHTML = `<span style="color:var(--text-muted);font-size:13px">
-      서버가 실행 중이 아닙니다. 먼저 시작해주세요.
-    </span>`;
+    previewEl.innerHTML = `
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;user-select:none;">
+        <div style="width:4px;height:4px;image-rendering:pixelated;color:transparent;box-shadow:
+          /* tent peak */
+          12px 0 0 #6b7394,
+          8px 4px 0 #6b7394, 12px 4px 0 #6b7394, 16px 4px 0 #6b7394,
+          4px 8px 0 #6b7394, 8px 8px 0 #6b7394, 12px 8px 0 #6b7394, 16px 8px 0 #6b7394, 20px 8px 0 #6b7394,
+          0px 12px 0 #4a5170, 4px 12px 0 #4a5170, 8px 12px 0 #4a5170, 12px 12px 0 #4a5170, 16px 12px 0 #4a5170, 20px 12px 0 #4a5170, 24px 12px 0 #4a5170,
+          /* zzz */
+          36px 0 0 #4a5170, 40px 4px 0 #4a5170, 36px 8px 0 #4a5170;
+          transform:scale(2);margin-bottom:8px;
+        "></div>
+        <div style="color:var(--text-muted);font-size:14px;text-align:center;margin-top:24px;">
+          캠프가 자고 있어유... zzZ
+        </div>
+      </div>`;
   }
 
   // Terminal button label
@@ -1737,150 +1750,643 @@ window.autoFix = async function autoFix(name) {
 };
 
 // ---------------------------------------------------------------------------
-// Onboarding Tutorial
+// Sherpa Guide Mode (replaces overlay onboarding)
 // ---------------------------------------------------------------------------
 
 const ONBOARDING_KEY = 'sanjang-onboarded';
 
-const onboardingSteps = [
-  {
-    target: '#quickstart-input',
-    title: '캠프 만들기',
-    text: '하고 싶은 걸 입력하면 AI가 캠프를 자동으로 만들어줘요.',
-    position: 'bottom',
-  },
-  {
-    target: '#ws-preview',
-    title: '프리뷰 확인',
-    text: '캠프에 들어가면 전체화면으로 프리뷰를 볼 수 있어요.',
-    position: 'center',
-    waitForWorkspace: true,
-  },
-  {
-    target: '#ws-save-btn',
-    title: '세이브하기',
-    text: '변경사항이 있으면 세이브 버튼으로 저장해요. 게임 세이브처럼요!',
-    position: 'left',
-    waitForWorkspace: true,
-  },
+const SHERPA_GUIDE = [
+  "여기에 하고 싶은 거 적으면 되유. AI가 캠프 만들어줄겨.",
+  "캠프 들어가면 프리뷰 전체화면으로 보여유. 편하쥬?",
+  "세이브는 게임 세이브처럼 저장이여유. 💾 버튼 누르면 되유.",
+  "팀에 보내기 누르면 PR 만들어주유. 셰르파가 다 해줄겨.",
+  "그럼 이제 시작해봐유. 화이팅이여유~ 🏔️",
 ];
 
-function showOnboarding() {
-  if (localStorage.getItem(ONBOARDING_KEY)) return;
-  let step = 0;
+// ---------------------------------------------------------------------------
+// Sherpa Mode System (guide ↔ grumpy toggle)
+// ---------------------------------------------------------------------------
 
-  function show() {
-    // Remove previous
-    document.querySelector('.onboarding-overlay')?.remove();
+let sherpaInterval = null;
+let sherpaMode = 'grumpy'; // 'guide' or 'grumpy'
+let sherpaQueue = [];
+let sherpaIdx = 0;
 
-    if (step >= onboardingSteps.length) {
-      localStorage.setItem(ONBOARDING_KEY, '1');
-      return;
-    }
+function shuffleArray(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
 
-    const s = onboardingSteps[step];
+function setSherpaMode(mode) {
+  sherpaMode = mode;
+  sherpaIdx = 0;
+  sherpaQueue = mode === 'guide' ? [...SHERPA_GUIDE] : shuffleArray(SHERPA_QUOTES);
 
-    // Skip workspace steps if not in workspace
-    if (s.waitForWorkspace && !currentWorkspace) {
-      step++;
-      show();
-      return;
-    }
+  const el = document.getElementById('sherpa-quote');
+  const speech = document.getElementById('sherpa-speech');
+  if (!el || !speech) return;
 
-    const el = document.querySelector(s.target);
-    if (!el) { step++; show(); return; }
-
-    const overlay = document.createElement('div');
-    overlay.className = 'onboarding-overlay';
-
-    const rect = el.getBoundingClientRect();
-    const highlight = document.createElement('div');
-    highlight.className = 'onboarding-highlight';
-    highlight.style.top = `${rect.top - 4}px`;
-    highlight.style.left = `${rect.left - 4}px`;
-    highlight.style.width = `${rect.width + 8}px`;
-    highlight.style.height = `${rect.height + 8}px`;
-    overlay.appendChild(highlight);
-
-    const tooltip = document.createElement('div');
-    tooltip.className = 'onboarding-tooltip';
-    tooltip.innerHTML = `
-      <div class="onboarding-title">${s.title}</div>
-      <div class="onboarding-text">${s.text}</div>
-      <div class="onboarding-actions">
-        <span class="onboarding-step">${step + 1}/${onboardingSteps.length}</span>
-        <button class="btn btn-ghost btn-sm" onclick="skipOnboarding()">건너뛰기</button>
-        <button class="btn btn-primary btn-sm" onclick="nextOnboardingStep()">${step === onboardingSteps.length - 1 ? '완료' : '다음'}</button>
-      </div>`;
+  // Visual mode indicator
+  speech.classList.toggle('guide-mode', mode === 'guide');
 
-    // Position tooltip near target
-    if (s.position === 'bottom') {
-      tooltip.style.top = `${rect.bottom + 12}px`;
-      tooltip.style.left = `${Math.max(12, rect.left)}px`;
-    } else if (s.position === 'left') {
-      tooltip.style.top = `${rect.top}px`;
-      tooltip.style.right = `${window.innerWidth - rect.left + 12}px`;
-    } else {
-      tooltip.style.top = '50%';
-      tooltip.style.left = '50%';
-      tooltip.style.transform = 'translate(-50%, -50%)';
+  // Fade transition to first message
+  el.style.opacity = '0';
+  setTimeout(() => {
+    el.textContent = sherpaQueue[0];
+    el.style.opacity = '1';
+  }, 300);
+}
+
+function advanceSherpa() {
+  const el = document.getElementById('sherpa-quote');
+  if (!el) return;
+
+  el.style.opacity = '0';
+  setTimeout(() => {
+    sherpaIdx++;
+    if (sherpaIdx >= sherpaQueue.length) {
+      if (sherpaMode === 'guide') {
+        // Guide done → switch to grumpy
+        localStorage.setItem(ONBOARDING_KEY, '1');
+        setSherpaMode('grumpy');
+        return;
+      }
+      // Reshuffle grumpy quotes
+      sherpaQueue = shuffleArray(SHERPA_QUOTES);
+      sherpaIdx = 0;
     }
+    el.textContent = sherpaQueue[sherpaIdx];
+    el.style.opacity = '1';
+  }, 500);
+}
+
+// ---------------------------------------------------------------------------
+// Basecamp Scene — Time-based Himalaya SVG
+// ---------------------------------------------------------------------------
+
+const SCENE_THEMES = {
+  dawn: {
+    skyGradient: [['0%','#050810'],['60%','#0a1028'],['100%','#141830']],
+    farRange: '#1a2040',
+    midRange: '#141a30',
+    ground: '#12151e',
+    snowColor: 'rgba(200,215,240,0.35)',
+    snowHighlight: 'rgba(220,230,250,0.4)',
+  },
+  morning: {
+    skyGradient: [['0%','#1a2540'],['40%','#2d3a5c'],['70%','#5c4a6e'],['100%','#c4785a']],
+    farRange: '#2a3058',
+    midRange: '#1e2444',
+    ground: '#12151e',
+    snowColor: 'rgba(255,220,180,0.45)',
+    snowHighlight: 'rgba(255,200,150,0.55)',
+  },
+  day: {
+    skyGradient: [['0%','#1a3050'],['50%','#2a4a6a'],['100%','#3a5a7a']],
+    farRange: '#253a58',
+    midRange: '#1a2e48',
+    ground: '#12151e',
+    snowColor: 'rgba(255,255,255,0.5)',
+    snowHighlight: 'rgba(255,255,255,0.6)',
+  },
+  evening: {
+    skyGradient: [['0%','#060810'],['40%','#0e1530'],['75%','#1a1535'],['100%','#12151e']],
+    farRange: '#182040',
+    midRange: '#121830',
+    ground: '#12151e',
+    snowColor: 'rgba(200,180,230,0.35)',
+    snowHighlight: 'rgba(220,200,240,0.4)',
+  },
+};
+
+function renderBasecampScene() {
+  const container = document.getElementById('bc-scene-container');
+  if (!container) return;
 
-    overlay.appendChild(tooltip);
-    document.body.appendChild(overlay);
+  const P = 4; // pixel size (4px grid)
+  const hour = new Date().getHours();
+  let period;
+  if (hour >= 0 && hour < 6) period = 'dawn';
+  else if (hour >= 6 && hour < 12) period = 'morning';
+  else if (hour >= 12 && hour < 18) period = 'day';
+  else period = 'evening';
+
+  const theme = SCENE_THEMES[period];
+
+  // Build gradient stops
+  const stops = theme.skyGradient.map(([offset, color]) =>
+    `<stop offset="${offset}" stop-color="${color}"/>`
+  ).join('');
+
+  // --- Stars ---
+  let starsHtml = '';
+  if (period === 'dawn') {
+    const starPositions = [
+      [45,18],[120,30],[200,12],[280,25],[360,8],[440,22],[520,15],[590,28],[150,40],[400,35],[60,42],[500,38],[330,10]
+    ];
+    starsHtml = starPositions.map(([x,y]) =>
+      `<rect x="${x}" y="${y}" width="2" height="2" fill="#fff" opacity="${0.4 + Math.random()*0.4}"><animate attributeName="opacity" values="${0.3};${0.8};${0.3}" dur="${1.5 + Math.random()*2}s" repeatCount="indefinite"/></rect>`
+    ).join('');
+    // Crescent moon (pixel)
+    starsHtml += `
+      <rect x="576" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="580" y="16" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="580" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.25"/>
+      <rect x="584" y="16" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="584" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.15"/>
+      <rect x="588" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="580" y="24" width="${P}" height="${P}" fill="#c8cee6" opacity="0.25"/>
+      <rect x="584" y="24" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+    `;
+  } else if (period === 'morning') {
+    const starPositions = [[120,20],[400,15],[550,30]];
+    starsHtml = starPositions.map(([x,y]) =>
+      `<rect x="${x}" y="${y}" width="2" height="2" fill="#fff" opacity="0.2"/>`
+    ).join('');
+  } else if (period === 'day') {
+    // Pixel clouds (4px grid)
+    starsHtml = `
+      <g opacity="0.12">
+        <rect x="104" y="28" width="8" height="4" fill="#fff"/>
+        <rect x="100" y="32" width="16" height="4" fill="#fff"/>
+        <rect x="108" y="36" width="4" height="4" fill="#fff"/>
+        <rect x="436" y="24" width="12" height="4" fill="#fff"/>
+        <rect x="432" y="28" width="20" height="4" fill="#fff"/>
+        <rect x="440" y="32" width="8" height="4" fill="#fff"/>
+      </g>
+    `;
+  } else {
+    const starPositions = [
+      [80,15],[160,35],[250,10],[340,28],[430,18],[510,32],[590,12],[140,45],[380,40],[620,25]
+    ];
+    starsHtml = starPositions.map(([x,y]) =>
+      `<rect x="${x}" y="${y}" width="2" height="2" fill="#fff" opacity="${0.3 + Math.random()*0.5}"><animate attributeName="opacity" values="${0.2};${0.7};${0.2}" dur="${2 + Math.random()*2}s" repeatCount="indefinite"/></rect>`
+    ).join('');
   }
 
-  window.nextOnboardingStep = function() {
-    step++;
-    show();
-  };
+  // --- Mountains ---
+  const farRangePoly = `0,220 0,150 20,150 20,140 40,140 40,125 55,125 55,115 70,115 70,105 85,105 85,95
+    95,95 95,85 105,85 105,80 115,80 115,85 125,85 125,95 135,95 135,105
+    150,105 150,115 165,115 165,125 180,125 180,135 200,135 200,145 220,145
+    220,135 235,135 235,120 250,120 250,105 260,105 260,90 270,90 270,78 280,78
+    280,70 288,70 288,62 295,62 295,56 302,56 302,50 308,50 308,45 314,45
+    314,50 320,50 320,56 326,56 326,65 335,65 335,78 345,78 345,90
+    355,90 355,105 370,105 370,120 385,120 385,135 400,135
+    400,125 415,125 415,110 425,110 425,98 435,98 435,88 445,88 445,78
+    450,78 450,70 456,70 456,64 462,64 462,58 466,58 466,54 470,54
+    470,50 474,50 474,46 478,46 478,50 482,50 482,56 486,56
+    486,64 492,64 492,72 498,72 498,82 508,82 508,95 518,95
+    518,108 530,108 530,120 545,120 545,135 560,135
+    560,125 570,125 570,112 580,112 580,100 590,100 590,88 598,88 598,78
+    605,78 605,70 612,70 612,76 618,76 618,85 625,85 625,95
+    635,95 635,108 645,108 645,120 658,120 658,135 680,135 680,220`;
+
+  const midRangePoly = `0,220 0,170 30,170 30,160 60,160 60,152 80,152 80,160 110,160 110,168
+    140,168 140,158 160,158 160,148 175,148 175,140 188,140 188,135 198,135 198,140
+    210,140 210,150 230,150 230,162 260,162 260,155 280,155 280,145 295,145 295,138
+    310,138 310,145 330,145 330,155 350,155 350,165
+    380,165 380,155 400,155 400,148 415,148 415,140 425,140 425,135 432,135 432,140
+    440,140 440,150 460,150 460,160 480,160 480,168
+    510,168 510,158 530,158 530,148 545,148 545,142 555,142 555,148
+    565,148 565,158 585,158 585,165 610,165 610,158 630,158 630,165 660,165 660,170 680,170 680,220`;
+
+  // --- Snow caps (4px grid) ---
+  const snowCaps = `
+    <!-- Main peak snow -->
+    <rect x="308" y="45" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <rect x="304" y="49" width="${P*4}" height="${P}" fill="${theme.snowColor}"/>
+    <!-- Second peak snow -->
+    <rect x="474" y="46" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <rect x="470" y="50" width="${P*4}" height="${P}" fill="${theme.snowColor}"/>
+    <!-- Smaller peaks -->
+    <rect x="104" y="80" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <rect x="604" y="70" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <!-- Mid-range snow -->
+    <rect x="188" y="135" width="${P*2}" height="${P}" fill="${theme.snowColor}" opacity="0.5"/>
+    <rect x="424" y="135" width="${P*2}" height="${P}" fill="${theme.snowColor}" opacity="0.5"/>
+    <rect x="544" y="142" width="${P*2}" height="${P}" fill="${theme.snowColor}" opacity="0.5"/>
+  `;
+
+  // --- Ground + texture ---
+  const groundHtml = `
+    <rect x="0" y="185" width="680" height="35" fill="${theme.ground}"/>
+    <rect x="50" y="188" width="8" height="3" fill="#1a1d28" opacity="0.5"/>
+    <rect x="200" y="190" width="6" height="2" fill="#1a1d28" opacity="0.4"/>
+    <rect x="350" y="187" width="10" height="3" fill="#1a1d28" opacity="0.5"/>
+    <rect x="500" y="191" width="7" height="2" fill="#1a1d28" opacity="0.4"/>
+    <rect x="620" y="189" width="5" height="3" fill="#1a1d28" opacity="0.5"/>
+  `;
+
+  // --- Shared basecamp elements (all 4px grid pixel art) ---
+
+  const tents = `
+    <!-- Yellow expedition tent (pixel pyramid) -->
+    <g>
+      <rect x="88" y="172" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="84" y="176" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="88" y="176" width="${P}" height="${P}" fill="#a08818"/>
+      <rect x="92" y="176" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="80" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="84" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="88" y="180" width="${P}" height="${P}" fill="#2c2210"/>
+      <rect x="92" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="96" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+    </g>
+    <!-- Blue dome tent (pixel) -->
+    <g>
+      <rect x="520" y="176" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="524" y="176" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="516" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="520" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="524" y="180" width="${P}" height="${P}" fill="#1a2040"/>
+      <rect x="528" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="532" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+    </g>
+    <!-- Green small tent (pixel) -->
+    <g>
+      <rect x="580" y="176" width="${P}" height="${P}" fill="#1e8040"/>
+      <rect x="576" y="180" width="${P}" height="${P}" fill="#1e8040"/>
+      <rect x="580" y="180" width="${P}" height="${P}" fill="#166030"/>
+      <rect x="584" y="180" width="${P}" height="${P}" fill="#1e8040"/>
+    </g>
+    <!-- Red expedition tent (pixel) -->
+    <g>
+      <rect x="448" y="172" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="444" y="176" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="448" y="176" width="${P}" height="${P}" fill="#902020"/>
+      <rect x="452" y="176" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="440" y="180" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="444" y="180" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="448" y="180" width="${P}" height="${P}" fill="#401010"/>
+      <rect x="452" y="180" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="456" y="180" width="${P}" height="${P}" fill="#b83030"/>
+    </g>
+  `;
+
+  const flagColors = ['#e74c3c','#f39c12','#fff','#2ecc71','#3498db'];
+  const prayerFlags1 = flagColors.map((c, i) =>
+    `<rect x="${156 + i*8}" y="172" width="${P}" height="${P}" fill="${c}" opacity="0.7"/>`
+  ).join('') + flagColors.map((c, i) =>
+    `<rect x="${156 + i*8}" y="168" width="${P}" height="1" fill="#4a5170" opacity="0.5"/>`
+  ).join('');
+
+  const prayerFlags2 = flagColors.map((c, i) =>
+    `<rect x="${420 + i*8}" y="168" width="${P}" height="${P}" fill="${c}" opacity="0.6"/>`
+  ).join('') + flagColors.map((c, i) =>
+    `<rect x="${420 + i*8}" y="164" width="${P}" height="1" fill="#4a5170" opacity="0.4"/>`
+  ).join('');
+
+  const supplies = `
+    <!-- Supply crates (pixel) -->
+    <rect x="128" y="180" width="${P*2}" height="${P}" fill="#6b4a28"/>
+    <rect x="128" y="180" width="${P*2}" height="1" fill="#8b6a38"/>
+    <rect x="128" y="176" width="${P*2}" height="${P}" fill="#5a3a20"/>
+    <rect x="128" y="176" width="${P*2}" height="1" fill="#7a5a30"/>
+    <rect x="136" y="180" width="${P}" height="${P}" fill="#5a3a20"/>
+    <!-- Oxygen tanks (pixel) -->
+    <rect x="472" y="180" width="${P}" height="${P}" fill="#4a6a8a"/>
+    <rect x="472" y="176" width="${P}" height="${P}" fill="#6a8aaa"/>
+    <rect x="476" y="180" width="${P}" height="${P}" fill="#4a6a8a"/>
+    <rect x="476" y="176" width="${P}" height="${P}" fill="#6a8aaa"/>
+    <!-- Signpost (pixel) -->
+    <rect x="300" y="172" width="${P}" height="${P*3}" fill="#5a4a30"/>
+    <rect x="296" y="172" width="${P*3}" height="${P}" fill="#6b5a38"/>
+    <rect x="308" y="173" width="${P}" height="2" fill="#6b5a38"/>
+    <!-- Rope coil (pixel) -->
+    <rect x="600" y="176" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="604" y="176" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="596" y="180" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="608" y="180" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="600" y="184" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="604" y="184" width="${P}" height="${P}" fill="#8b7a50"/>
+    <!-- Ice axe (pixel) -->
+    <rect x="144" y="168" width="${P}" height="${P}" fill="#8090b0"/>
+    <rect x="144" y="172" width="${P}" height="${P}" fill="#6b5a38"/>
+    <rect x="144" y="176" width="${P}" height="${P}" fill="#6b5a38"/>
+    <rect x="140" y="168" width="${P}" height="${P}" fill="#aab0c0"/>
+  `;
+
+  // --- Stone ring around campfire (4px grid) ---
+  const stoneRing = `
+    <rect x="320" y="184" width="${P}" height="${P}" fill="#3a3a40"/>
+    <rect x="324" y="184" width="${P}" height="${P}" fill="#454550"/>
+    <rect x="336" y="184" width="${P}" height="${P}" fill="#454550"/>
+    <rect x="340" y="184" width="${P}" height="${P}" fill="#3a3a40"/>
+    <rect x="318" y="180" width="${P}" height="${P}" fill="#454550"/>
+    <rect x="342" y="180" width="${P}" height="${P}" fill="#3a3a40"/>
+  `;
+
+  // --- Campfire (period-specific) ---
+  let campfireHtml = '';
+  if (period === 'dawn') {
+    // Dim embers (pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <rect x="328" y="180" width="${P}" height="${P}" fill="#8b2200" opacity="0.5"/>
+      <rect x="332" y="180" width="${P}" height="${P}" fill="#a03000" opacity="0.4"/>
+    `;
+  } else if (period === 'morning') {
+    // Smoke only (pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <rect x="328" y="180" width="${P}" height="${P}" fill="#5a4a30"/>
+      <rect x="332" y="180" width="${P}" height="${P}" fill="#5a4a30"/>
+      <rect x="328" y="176" width="${P}" height="${P}" fill="#4a5170" opacity="0.2"/>
+      <rect x="332" y="172" width="${P}" height="${P}" fill="#4a5170" opacity="0.15"/>
+      <rect x="328" y="168" width="${P}" height="${P}" fill="#4a5170" opacity="0.1"/>
+    `;
+  } else if (period === 'day') {
+    // No fire, just logs (pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <rect x="324" y="180" width="${P*3}" height="${P}" fill="#5a4a30"/>
+      <rect x="328" y="176" width="${P*2}" height="${P}" fill="#6b4a28"/>
+    `;
+  } else {
+    // Full fire with glow (all 4px pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <!-- Glow (rect-based) -->
+      <rect x="316" y="168" width="${P*7}" height="${P*4}" fill="#ff8c32" opacity="0.04"/>
+      <rect x="320" y="172" width="${P*5}" height="${P*3}" fill="#ff6600" opacity="0.06"/>
+      <!-- Logs -->
+      <rect x="324" y="180" width="${P*3}" height="${P}" fill="#5a3a20"/>
+      <rect x="326" y="180" width="${P*3}" height="${P}" fill="#6b4a28"/>
+      <!-- Flames (pixel, animated with steps) -->
+      <rect x="328" y="176" width="${P}" height="${P}" fill="#ff6600">
+        <animate attributeName="opacity" values="1;0.6;1" dur="0.4s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <rect x="332" y="172" width="${P}" height="${P}" fill="#ffcc00">
+        <animate attributeName="opacity" values="0.8;1;0.6" dur="0.5s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <rect x="332" y="176" width="${P}" height="${P}" fill="#ff8800"/>
+      <rect x="328" y="172" width="${P}" height="${P}" fill="#ff9900" opacity="0.7">
+        <animate attributeName="opacity" values="0.7;0.3;0.7" dur="0.35s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <rect x="336" y="176" width="${P}" height="${P}" fill="#ff6600" opacity="0.6"/>
+      <rect x="330" y="168" width="${P}" height="${P}" fill="#ff6600" opacity="0.4">
+        <animate attributeName="opacity" values="0.4;0.1;0.4" dur="0.6s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <!-- Smoke (pixel) -->
+      <rect x="332" y="164" width="${P}" height="${P}" fill="#4a5170" opacity="0.15">
+        <animate attributeName="opacity" values="0.15;0.05;0.15" dur="2s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="328" y="160" width="${P}" height="${P}" fill="#4a5170" opacity="0.08"/>
+    `;
+  }
 
-  window.skipOnboarding = function() {
-    document.querySelector('.onboarding-overlay')?.remove();
-    localStorage.setItem(ONBOARDING_KEY, '1');
-  };
+  // --- Sherpa (period-specific) ---
+  let sherpaHtml = '';
+  if (period === 'dawn') {
+    // Sleeping horizontally
+    sherpaHtml = `
+      <g transform="translate(345, 178)">
+        <!-- Body lying flat -->
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="8" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="12" y="0" width="4" height="4" fill="#2c3e50"/>
+        <rect x="16" y="0" width="4" height="4" fill="#2c3e50"/>
+        <!-- Head -->
+        <rect x="-4" y="-1" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Hat flat -->
+        <rect x="-8" y="-2" width="4" height="4" fill="#e74c3c"/>
+        <!-- Zzz (pixel) -->
+        <rect x="8" y="-8" width="${P}" height="${P}" fill="#8888aa" opacity="0.5"/>
+        <rect x="12" y="-12" width="${P}" height="${P}" fill="#8888aa" opacity="0.4"/>
+        <rect x="14" y="-16" width="${P}" height="${P}" fill="#8888aa" opacity="0.3"/>
+        <rect x="16" y="-20" width="${P}" height="${P}" fill="#8888aa" opacity="0.2"/>
+      </g>
+    `;
+  } else if (period === 'morning') {
+    // Stretching (arms raised)
+    sherpaHtml = `
+      <g transform="translate(345, 170)">
+        <!-- Hat -->
+        <rect x="0" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="-4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <!-- Face -->
+        <rect x="-4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="0" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Body -->
+        <rect x="-4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <!-- Arms raised -->
+        <rect x="-8" y="-8" width="4" height="4" fill="#3498db"/>
+        <rect x="8" y="-4" width="4" height="4" fill="#3498db"/>
+        <!-- Lower body -->
+        <rect x="-4" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="4" width="4" height="4" fill="#3498db"/>
+        <!-- Legs -->
+        <rect x="-4" y="8" width="4" height="4" fill="#2c3e50"/>
+        <rect x="4" y="8" width="4" height="4" fill="#2c3e50"/>
+      </g>
+    `;
+  } else if (period === 'day') {
+    // Walking pose with backpack
+    sherpaHtml = `
+      <g transform="translate(355, 166)">
+        <!-- Hat -->
+        <rect x="0" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="-4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <!-- Face -->
+        <rect x="-4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="0" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Body -->
+        <rect x="-4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="-4" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="4" width="4" height="4" fill="#3498db"/>
+        <!-- Backpack -->
+        <rect x="8" y="0" width="4" height="4" fill="#8b6914"/>
+        <rect x="8" y="4" width="4" height="4" fill="#8b6914"/>
+        <!-- Legs (walking) -->
+        <rect x="-4" y="8" width="4" height="4" fill="#2c3e50"/>
+        <rect x="0" y="8" width="4" height="4" fill="#2c3e50"/>
+        <rect x="4" y="12" width="4" height="4" fill="#2c3e50"/>
+        <rect x="-4" y="12" width="4" height="4" fill="#2c3e50"/>
+      </g>
+    `;
+  } else {
+    // Sitting with mug
+    sherpaHtml = `
+      <g transform="translate(345, 170)">
+        <!-- Hat -->
+        <rect x="0" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="-4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <!-- Face -->
+        <rect x="-4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="0" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Body -->
+        <rect x="-4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <!-- Backpack -->
+        <rect x="8" y="0" width="4" height="4" fill="#8b6914"/>
+        <!-- Sitting legs -->
+        <rect x="-4" y="4" width="4" height="4" fill="#2c3e50"/>
+        <rect x="0" y="4" width="4" height="4" fill="#2c3e50"/>
+        <!-- Mug (pixel) -->
+        <rect x="-8" y="0" width="${P}" height="${P}" fill="#ddd"/>
+        <rect x="-12" y="0" width="${P}" height="${P}" fill="#ddd" opacity="0.5"/>
+        <!-- Steam (pixel) -->
+        <rect x="-8" y="-4" width="${P}" height="${P}" fill="#4a5170" opacity="0.2">
+          <animate attributeName="opacity" values="0.2;0.05;0.2" dur="2s" repeatCount="indefinite"/>
+        </rect>
+      </g>
+    `;
+  }
 
-  // Start first step (only if on portal/quickstart visible)
-  show();
-}
+  // --- Distant climber (day and evening only) ---
+  let distantClimber = '';
+  if (period === 'day' || period === 'evening') {
+    const climbOpacity = period === 'day' ? 0.6 : 0.5;
+    distantClimber = `
+      <g transform="translate(612, 148)" opacity="${climbOpacity}">
+        <rect x="0" y="0" width="${P}" height="${P}" fill="#f5c6a0"/>
+        <rect x="0" y="4" width="${P}" height="${P}" fill="#c84040"/>
+        <rect x="0" y="8" width="${P}" height="${P}" fill="#2c3e50"/>
+        <rect x="4" y="0" width="${P}" height="${P}" fill="#8090b0" opacity="0.5"/>
+        <rect x="4" y="4" width="${P}" height="${P}" fill="#8090b0" opacity="0.4"/>
+      </g>
+    `;
+  }
 
-// ---------------------------------------------------------------------------
-// Sherpa Quote Rotation
-// ---------------------------------------------------------------------------
+  // --- Tent glow (dawn only) ---
+  let tentGlow = '';
+  if (period === 'dawn') {
+    tentGlow = `<rect x="88" y="180" width="4" height="4" fill="#ffcc44" opacity="0.3"/>`;
+  }
+
+  // --- Sunrise glow (morning only) ---
+  let sunriseGlow = '';
+  if (period === 'morning') {
+    sunriseGlow = `<rect x="360" y="140" width="280" height="60" fill="#e8834a" opacity="0.06"/>
+      <rect x="400" y="160" width="200" height="40" fill="#f5a060" opacity="0.05"/>`;
+  }
+
+  // --- Assemble SVG ---
+  const svgString = `
+    <svg viewBox="0 0 680 220" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="image-rendering:pixelated">
+      <defs>
+        <linearGradient id="bc-sky" x1="0" y1="0" x2="0" y2="1">
+          ${stops}
+        </linearGradient>
+      </defs>
+
+      <!-- Sky -->
+      <rect width="680" height="220" fill="url(#bc-sky)"/>
+
+      ${sunriseGlow}
+
+      <!-- Stars / clouds -->
+      ${starsHtml}
+
+      <!-- Far range mountains -->
+      <polygon points="${farRangePoly}" fill="${theme.farRange}"/>
+
+      <!-- Snow caps -->
+      ${snowCaps}
+
+      <!-- Mid range mountains -->
+      <polygon points="${midRangePoly}" fill="${theme.midRange}"/>
+
+      <!-- Ground -->
+      ${groundHtml}
+
+      <!-- Tent glow -->
+      ${tentGlow}
+
+      <!-- Tents -->
+      ${tents}
+
+      <!-- Prayer flags -->
+      ${prayerFlags1}
+      ${prayerFlags2}
+
+      <!-- Supplies & gear -->
+      ${supplies}
+
+      <!-- Campfire -->
+      ${campfireHtml}
+
+      <!-- Sherpa -->
+      ${sherpaHtml}
+
+      <!-- Distant climber -->
+      ${distantClimber}
+    </svg>
+  `;
+
+  container.innerHTML = svgString;
+}
 
 function startSherpaQuotes() {
   const el = document.getElementById('sherpa-quote');
   if (!el) return;
 
-  // Shuffle array (Fisher-Yates)
-  let quotes = [...SHERPA_QUOTES];
-  for (let i = quotes.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [quotes[i], quotes[j]] = [quotes[j], quotes[i]];
-  }
+  const isFirstVisit = !localStorage.getItem(ONBOARDING_KEY);
 
-  let idx = 0;
-  // Set initial random quote
-  el.textContent = quotes[idx];
+  if (isFirstVisit) {
+    // First visit: start with tap prompt, then guide on click
+    sherpaMode = 'intro';
+    el.textContent = '나를 눌러보세유~';
+  } else {
+    setSherpaMode('grumpy');
+  }
 
-  setInterval(() => {
-    el.style.opacity = '0';
-    setTimeout(() => {
-      idx++;
-      if (idx >= quotes.length) {
-        // Reshuffle
-        for (let i = quotes.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1));
-          [quotes[i], quotes[j]] = [quotes[j], quotes[i]];
-        }
-        idx = 0;
-      }
-      el.textContent = quotes[idx];
-      el.style.opacity = '1';
-    }, 500);
+  // Start rotation timer
+  if (sherpaInterval) clearInterval(sherpaInterval);
+  sherpaInterval = setInterval(() => {
+    if (sherpaMode === 'intro') return; // Don't rotate during intro
+    advanceSherpa();
   }, 8000);
 }
 
+window.toggleSherpaMode = function() {
+  const speech = document.getElementById('sherpa-speech');
+  const el = document.getElementById('sherpa-quote');
+  if (!el || !speech) return;
+
+  if (sherpaMode === 'intro') {
+    // First click ever: enter guide mode
+    setSherpaMode('guide');
+    return;
+  }
+
+  // Toggle between guide and grumpy
+  const newMode = sherpaMode === 'guide' ? 'grumpy' : 'guide';
+
+  // Brief mode-switch message
+  el.style.opacity = '0';
+  setTimeout(() => {
+    if (newMode === 'guide') {
+      el.textContent = '가이드 모드여유~ 사용법 알려줄겨 📋';
+    } else {
+      el.textContent = '다시 푸념 모드여유... 😮‍💨';
+    }
+    el.style.opacity = '1';
+
+    setTimeout(() => {
+      setSherpaMode(newMode);
+    }, 2000);
+  }, 300);
+};
+
 // ---------------------------------------------------------------------------
 // Activity Trail
 // ---------------------------------------------------------------------------
@@ -2137,12 +2643,11 @@ async function init() {
   }
   renderAll();
   loadPortal();
+  renderBasecampScene();
   startSherpaQuotes();
   loadActivityTrail();
   connectWs();
 
-  // Show onboarding for first-time users
-  setTimeout(showOnboarding, 500);
 }
 
 document.addEventListener('DOMContentLoaded', init);

package/dashboard/index.html

@@ -19,38 +19,14 @@
   <div id="portal">
     <!-- 베이스캠프 씬 -->
     <div class="portal-section" id="basecamp-scene">
-      <div class="bc-scene">
-        <!-- Stars -->
-        <div class="bc-star twinkle" style="top:8%;left:12%"></div>
-        <div class="bc-star twinkle-slow" style="top:15%;left:30%"></div>
-        <div class="bc-star twinkle" style="top:5%;left:48%"></div>
-        <div class="bc-star twinkle-slow" style="top:20%;left:65%"></div>
-        <div class="bc-star twinkle" style="top:10%;left:80%"></div>
-        <div class="bc-star twinkle-slow" style="top:25%;left:92%"></div>
-        <div class="bc-star twinkle" style="top:18%;left:5%"></div>
-        <div class="bc-star twinkle-slow" style="top:6%;left:72%"></div>
-        <div class="bc-star twinkle" style="top:22%;left:42%"></div>
-        <div class="bc-star twinkle-slow" style="top:12%;left:55%"></div>
-
-        <!-- Mountains -->
-        <div class="bc-mountain bc-mountain-back"></div>
-        <div class="bc-mountain bc-mountain-front"></div>
-
-        <!-- Snow caps -->
-        <div class="bc-snow" style="bottom:64px;left:48%;width:12px"></div>
-        <div class="bc-snow" style="bottom:60px;left:50%;width:8px"></div>
-        <div class="bc-snow" style="bottom:56px;left:46%;width:4px"></div>
-
-        <!-- Campfire glow + campfire -->
-        <div class="bc-glow"></div>
-        <div class="bc-campfire"></div>
-
-        <!-- Sherpa -->
-        <div class="bc-sherpa"></div>
-
-        <!-- Speech bubble -->
+      <div class="bc-scene" id="bc-scene-container">
+        <!-- JS renders time-based SVG scene here -->
+      </div>
+      <!-- Speech bubble stays outside SVG for text rendering -->
+      <div class="bc-speech-wrap">
+        <div class="bc-sherpa-hitbox" onclick="toggleSherpaMode()" title="클릭해서 모드 변경"></div>
         <div class="bc-speech fade-in" id="sherpa-speech">
-          <span id="sherpa-quote">요구사항 또 바뀌었댜... 뭐 그러려니 하쥬</span>
+          <span id="sherpa-quote"></span>
         </div>
       </div>
     </div>

package/dashboard/style.css

@@ -2046,331 +2046,70 @@ header.hidden {
    Onboarding Tutorial
    ============================================================ */
 
-.onboarding-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 10000;
-}
-
-.onboarding-highlight {
-  position: fixed;
-  border: 2px solid var(--accent, #6366f1);
-  border-radius: 8px;
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.4);
-  z-index: 10001;
-  pointer-events: none;
-  animation: onboard-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes onboard-pulse {
-  0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.3); }
-  50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 30px rgba(99, 102, 241, 0.6); }
-}
-
-.onboarding-tooltip {
-  position: fixed;
-  background: var(--bg-elevated, #1e1e2e);
-  border: 1px solid var(--border, #333);
-  border-radius: 12px;
-  padding: 16px 20px;
-  max-width: 320px;
-  z-index: 10002;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
-  animation: onboard-fade-in 0.3s ease-out;
-}
-
-@keyframes onboard-fade-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.onboarding-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--text-primary, #fff);
-  margin-bottom: 6px;
-}
-
-.onboarding-text {
-  font-size: 13px;
-  color: var(--text-secondary, #aaa);
-  line-height: 1.5;
-  margin-bottom: 12px;
-}
-
-.onboarding-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.onboarding-step {
-  font-size: 11px;
-  color: var(--text-muted, #666);
-  flex: 1;
-}
 
 /* ============================================================
-   Basecamp Scene
+   Basecamp Scene — Himalaya
    ============================================================ */
 
 .bc-scene {
   position: relative;
-  height: 200px;
-  background: linear-gradient(180deg, #080a10 0%, #0c0e14 60%, #12151e 100%);
+  height: 220px;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid #1c2030;
 }
 
-/* Stars */
-.bc-star {
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  background: #fff;
-  image-rendering: pixelated;
-}
-
-.bc-star.twinkle {
-  animation: twinkle 2s steps(2) infinite;
-}
-
-.bc-star.twinkle-slow {
-  animation: twinkle 3.5s steps(2) infinite 0.8s;
-}
-
-@keyframes twinkle {
-  0%, 100% { opacity: 0.6; }
-  50% { opacity: 0.1; }
-}
-
-/* Mountains */
-.bc-mountain {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  image-rendering: pixelated;
-}
-
-.bc-mountain-back {
-  height: 100px;
-  background: #1a1d2a;
-  clip-path: polygon(
-    0% 100%, 0% 70%, 5% 70%, 5% 60%, 10% 60%, 10% 50%, 15% 50%, 15% 40%,
-    20% 40%, 20% 35%, 25% 35%, 25% 45%, 30% 45%, 30% 55%, 35% 55%, 35% 50%,
-    40% 50%, 40% 35%, 45% 35%, 45% 25%, 50% 25%, 50% 20%, 55% 20%, 55% 30%,
-    60% 30%, 60% 40%, 65% 40%, 65% 50%, 70% 50%, 70% 40%, 75% 40%, 75% 50%,
-    80% 50%, 80% 60%, 85% 60%, 85% 70%, 90% 70%, 90% 80%, 95% 80%, 100% 80%,
-    100% 100%
-  );
-}
-
-.bc-mountain-front {
-  height: 80px;
-  background: #12151e;
-  clip-path: polygon(
-    0% 100%, 0% 80%, 5% 80%, 5% 70%, 10% 70%, 10% 55%, 15% 55%, 15% 45%,
-    20% 45%, 20% 40%, 25% 40%, 25% 50%, 30% 50%, 30% 60%, 35% 60%, 35% 55%,
-    40% 55%, 40% 40%, 45% 40%, 45% 30%, 48% 30%, 48% 25%, 52% 25%, 52% 20%,
-    55% 20%, 55% 30%, 58% 30%, 58% 40%, 62% 40%, 62% 50%, 65% 50%, 65% 45%,
-    70% 45%, 70% 35%, 75% 35%, 75% 45%, 80% 45%, 80% 55%, 85% 55%, 85% 65%,
-    90% 65%, 90% 75%, 95% 75%, 95% 85%, 100% 85%, 100% 100%
-  );
-}
-
-/* Snow caps */
-.bc-snow {
-  position: absolute;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.25);
-  image-rendering: pixelated;
+.bc-scene svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-/* Campfire glow */
-.bc-glow {
+/* Speech bubble positioning */
+.bc-speech-wrap {
   position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80px;
-  height: 40px;
-  background: radial-gradient(ellipse at center bottom, rgba(255, 140, 50, 0.15) 0%, transparent 70%);
-  animation: glow-pulse 2s ease infinite;
-}
-
-@keyframes glow-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
+  bottom: 56px;
+  left: calc(50% + 16px);
+  z-index: 5;
 }
 
-/* Campfire pixel */
-.bc-campfire {
+.bc-sherpa-hitbox {
   position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 4px;
-  height: 4px;
-  background: #8b4513;
-  image-rendering: pixelated;
-  box-shadow:
-    -4px 0 0 #8b4513,
-     4px 0 0 #8b4513,
-     0 -4px 0 #ff6600,
-    -4px -4px 0 #ff8800,
-     4px -4px 0 #ff8800,
-     0 -8px 0 #ffaa00,
-    -4px -8px 0 #ff6600,
-     4px -8px 0 #ff6600,
-     0 -12px 0 #ffcc00;
-  animation: bc-fire 0.4s steps(1) infinite;
-}
-
-@keyframes bc-fire {
-  0% {
-    box-shadow:
-      -4px 0 0 #8b4513,
-       4px 0 0 #8b4513,
-       0 -4px 0 #ff6600,
-      -4px -4px 0 #ff8800,
-       4px -4px 0 #ff8800,
-       0 -8px 0 #ffaa00,
-      -4px -8px 0 #ff6600,
-       4px -8px 0 #ff6600,
-       0 -12px 0 #ffcc00;
-  }
-  50% {
-    box-shadow:
-      -4px 0 0 #8b4513,
-       4px 0 0 #8b4513,
-       0 -4px 0 #ff8800,
-      -4px -4px 0 #ff6600,
-       4px -4px 0 #ffaa00,
-       0 -8px 0 #ff6600,
-      -4px -8px 0 #ffcc00,
-       4px -8px 0 #ff8800,
-       0 -12px 0 #ff6600;
-  }
+  bottom: -44px;
+  left: -8px;
+  width: 44px;
+  height: 44px;
+  cursor: pointer;
+  z-index: 6;
 }
 
-/* Sherpa pixel character (idle pose) */
-.bc-sherpa {
-  position: absolute;
-  bottom: 16px;
-  left: calc(50% + 24px);
-  width: 4px;
-  height: 4px;
-  background: transparent;
-  image-rendering: pixelated;
-  box-shadow:
-    /* Hat */
-     0 -20px 0 #e74c3c,
-    -4px -20px 0 #e74c3c,
-     4px -20px 0 #e74c3c,
-    -4px -24px 0 #e74c3c,
-     0 -24px 0 #e74c3c,
-     4px -24px 0 #e74c3c,
-    /* Face */
-    -4px -16px 0 #f5c6a0,
-     0 -16px 0 #f5c6a0,
-     4px -16px 0 #f5c6a0,
-    /* Body */
-    -4px -12px 0 #3498db,
-     0 -12px 0 #3498db,
-     4px -12px 0 #3498db,
-    -4px -8px 0 #3498db,
-     0 -8px 0 #3498db,
-     4px -8px 0 #3498db,
-    /* Backpack */
-     8px -12px 0 #8b6914,
-     8px -8px 0 #8b6914,
-    /* Legs */
-    -4px -4px 0 #2c3e50,
-     0 -4px 0 #2c3e50,
-    -4px 0 0 #2c3e50,
-     4px 0 0 #2c3e50;
-  animation: sherpa-idle 1s steps(1) infinite;
-}
-
-@keyframes sherpa-idle {
-  0%, 100% {
-    box-shadow:
-       0 -20px 0 #e74c3c,
-      -4px -20px 0 #e74c3c,
-       4px -20px 0 #e74c3c,
-      -4px -24px 0 #e74c3c,
-       0 -24px 0 #e74c3c,
-       4px -24px 0 #e74c3c,
-      -4px -16px 0 #f5c6a0,
-       0 -16px 0 #f5c6a0,
-       4px -16px 0 #f5c6a0,
-      -4px -12px 0 #3498db,
-       0 -12px 0 #3498db,
-       4px -12px 0 #3498db,
-      -4px -8px 0 #3498db,
-       0 -8px 0 #3498db,
-       4px -8px 0 #3498db,
-       8px -12px 0 #8b6914,
-       8px -8px 0 #8b6914,
-      -4px -4px 0 #2c3e50,
-       0 -4px 0 #2c3e50,
-      -4px 0 0 #2c3e50,
-       4px 0 0 #2c3e50;
-  }
-  50% {
-    box-shadow:
-       0 -20px 0 #e74c3c,
-      -4px -20px 0 #e74c3c,
-       4px -20px 0 #e74c3c,
-      -4px -24px 0 #e74c3c,
-       0 -24px 0 #e74c3c,
-       4px -24px 0 #e74c3c,
-      -4px -16px 0 #f5c6a0,
-       0 -16px 0 #f5c6a0,
-       4px -16px 0 #f5c6a0,
-      -4px -12px 0 #3498db,
-       0 -12px 0 #3498db,
-       4px -12px 0 #3498db,
-      -4px -8px 0 #3498db,
-       0 -8px 0 #3498db,
-       4px -8px 0 #3498db,
-       8px -12px 0 #8b6914,
-       8px -8px 0 #8b6914,
-      -4px -4px 0 #2c3e50,
-       4px -4px 0 #2c3e50,
-      -4px 0 0 #2c3e50,
-       0 0 0 #2c3e50;
-  }
+#basecamp-scene {
+  position: relative;
 }
 
-/* Speech bubble */
 .bc-speech {
-  position: absolute;
-  bottom: 52px;
-  left: calc(50% + 8px);
+  position: relative;
   background: #1c2030;
   border: 1px solid #2a2f42;
   border-radius: 8px;
   padding: 6px 10px;
   font-size: 11px;
+  color: #e4e8f0;
   white-space: nowrap;
-  color: var(--text-secondary);
   animation: bubble-float 3s ease-in-out infinite;
 }
 
 .bc-speech::after {
   content: '';
   position: absolute;
-  bottom: -6px;
+  bottom: -5px;
   left: 20px;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #1c2030;
+  width: 8px;
+  height: 8px;
+  background: #1c2030;
+  border-right: 1px solid #2a2f42;
+  border-bottom: 1px solid #2a2f42;
+  transform: rotate(45deg);
 }
 
 @keyframes bubble-float {
@@ -2388,6 +2127,20 @@ header.hidden {
   transition: opacity 0.5s;
 }
 
+.bc-speech.guide-mode {
+  border-color: rgba(99, 102, 241, 0.4);
+  background: #1a1d2e;
+}
+
+.bc-speech.guide-mode::after {
+  background: #1a1d2e;
+  border-color: rgba(99, 102, 241, 0.4);
+}
+
+#sherpa-quote {
+  transition: opacity 0.5s;
+}
+
 /* ============================================================
    Activity Trail
    ============================================================ */

package/dist/bin/sanjang.js

@@ -132,7 +132,49 @@ else if (command === "help" || command === "--help" || command === "-h") {
 `);
 }
 else {
-    // Default: start server
+    // Default: start server — auto-init if no config exists
+    const configPath = resolve(projectRoot, "sanjang.config.js");
+    if (!existsSync(configPath)) {
+        console.log("⛰ 설정 파일이 없습니다. 프로젝트를 분석합니다...\n");
+        const { generateConfig, detectApps } = await import("../lib/config.js");
+        const apps = detectApps(projectRoot);
+        let appDir;
+        if (apps.length >= 2) {
+            console.log("⛰ 여러 앱이 감지되었습니다:");
+            for (let i = 0; i < apps.length; i++) {
+                console.log(`  ${i + 1}) ${apps[i].dir}/\t(${apps[i].framework})`);
+            }
+            console.log("");
+            const { createInterface } = await import("node:readline");
+            const rl = createInterface({ input: process.stdin, output: process.stdout });
+            const answer = await new Promise((r) => { rl.question("  어떤 앱을 띄울까요? [번호]: ", r); });
+            rl.close();
+            const idx = parseInt(answer) - 1;
+            if (idx < 0 || idx >= apps.length || isNaN(idx)) {
+                console.error("⛰ 잘못된 선택입니다.");
+                process.exit(1);
+            }
+            appDir = apps[idx].dir;
+            console.log(`  → ${appDir}/ (${apps[idx].framework}) 선택됨\n`);
+        }
+        else if (apps.length === 1) {
+            appDir = apps[0].dir;
+        }
+        const result = generateConfig(projectRoot, { appDir, force });
+        if (result.created) {
+            console.log(`⛰ ${result.message}`);
+            console.log(`  프레임워크: ${result.framework}\n`);
+        }
+        // Add .sanjang to .gitignore
+        const gitignorePath = resolve(projectRoot, ".gitignore");
+        if (existsSync(gitignorePath)) {
+            const { readFileSync, appendFileSync } = await import("node:fs");
+            const content = readFileSync(gitignorePath, "utf8");
+            if (!content.includes(".sanjang")) {
+                appendFileSync(gitignorePath, "\n# Sanjang local dev camps\n.sanjang/\n");
+            }
+        }
+    }
     const { startServer } = await import("../lib/server.js");
     await startServer(projectRoot, { port });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanjang",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Local dev environment manager for vibe coders",
   "type": "module",
   "bin": {