Apply supplied SVG branding and polish device settings

tests/e2e/layout.mjs

@@ -46,6 +46,24 @@ try {
   });
   await page.goto(url);
   await page.locator('.app-shell[data-online="true"]').waitFor();
+  await page.locator('.wordmark .brand-logo svg').waitFor();
+  const letterColor = () =>
+    page
+      .locator('.wordmark path[fill="currentColor"]')
+      .first()
+      .evaluate((el) => getComputedStyle(el).fill);
+  const dotColor = () =>
+    page.locator('.wordmark path[fill="#00FFFF"]').evaluate((el) => getComputedStyle(el).fill);
+  assert.equal(await letterColor(), 'rgb(245, 245, 245)');
+  assert.equal(await dotColor(), 'rgb(0, 255, 255)');
+  await page.getByRole('button', { name: '더보기', exact: true }).click();
+  await page.getByRole('menuitem', { name: '라이트 테마로 전환', exact: true }).click();
+  assert.equal(await letterColor(), 'rgb(23, 23, 23)');
+  assert.equal(await dotColor(), 'rgb(0, 255, 255)');
+  await page.screenshot({ path: 'tests/e2e/brand-light.png' });
+  await page.getByRole('button', { name: '더보기', exact: true }).click();
+  await page.getByRole('menuitem', { name: '다크 테마로 전환', exact: true }).click();
+
   assert.equal(
     await page
       .locator('.header-actions > .theme-toggle,.header-actions > .pwa-install-button')
@@ -64,6 +82,15 @@ try {
   await more.click();
   await page.getByRole('menuitem', { name: '서비스 정보', exact: true }).click();
   await page.getByRole('dialog', { name: '서비스 정보', exact: true }).waitFor();
+  const clipIds = await page
+    .locator('.brand-logo clipPath')
+    .evaluateAll((nodes) => nodes.map((node) => node.id));
+  assert.equal(
+    new Set(clipIds).size,
+    clipIds.length,
+    '동시에 표시한 로고의 clipPath ID가 겹치지 않음',
+  );
+
   assert.equal(await more.getAttribute('aria-expanded'), 'false');
   await page.screenshot({ path: 'tests/e2e/service-info-desktop.png' });
   await page.setViewportSize({ width: 390, height: 844 });
@@ -205,6 +232,18 @@ try {
       .evaluate((el) => getComputedStyle(el).fontSize),
     '16px',
   );
+  const mobileInput = await page.getByLabel('기기 이름', { exact: true }).boundingBox();
+  const mobileSave = await settings
+    .getByRole('button', { name: '저장', exact: true })
+    .boundingBox();
+  assert.equal(mobileInput.height, mobileSave.height);
+  await page.getByRole('switch', { name: '다른 기기에서 발견 허용' }).waitFor();
+  assert.equal(
+    await page
+      .locator('.discovery-setting')
+      .evaluate((el) => getComputedStyle(el).borderBottomWidth),
+    '0px',
+  );
   const settingsBounds = await settings.boundingBox();
   assert(Math.abs(settingsBounds.y + settingsBounds.height - 900) < 2, '모바일 설정 하단 시트');
   await page.getByLabel('기기 이름', { exact: true }).focus();
@@ -261,8 +300,22 @@ try {
   await page.keyboard.press('Escape');
   await sheet.waitFor({ state: 'hidden' });
   await page.locator('.footer-device-summary').click();
+  const deviceModal = page.getByRole('dialog', { name: '설정', exact: true });
+  const titleBounds = await deviceModal.locator('header').boundingBox();
+  const formBounds = await deviceModal.locator('.device-settings-form').boundingBox();
+  assert(
+    formBounds.y >= titleBounds.y + titleBounds.height + 12,
+    '제목과 기기 이름 폼이 겹치지 않음',
+  );
+  const desktopInput = await page.getByLabel('기기 이름', { exact: true }).boundingBox();
+  const desktopSave = await deviceModal
+    .getByRole('button', { name: '저장', exact: true })
+    .boundingBox();
+  assert.equal(desktopInput.height, desktopSave.height);
+  assert(Math.abs(desktopInput.y - desktopSave.y) < 1, 'PC 입력창과 버튼이 같은 위치에 정렬됨');
+  await page.screenshot({ path: 'tests/e2e/device-settings-desktop.png' });
   await page.getByLabel('기기 이름', { exact: true }).fill('나의 테스트 기기');
-  await page.getByRole('button', { name: '이름 저장', exact: true }).click();
+  await page.getByRole('button', { name: '저장', exact: true }).click();
   await page.locator('.footer-device-name').filter({ hasText: '나의 테스트 기기' }).waitFor();
   await page.locator('.footer-device-summary').click();
   await page.getByLabel('다른 기기에서 발견 허용').uncheck();