feat: add desktop label printer program files and clean up backup files

fix: 위치보기 수정 (도면 오버플로우 제한 및 API 호출 경로 정상화)
fix: 자산번호 저장 누락 오류 수정 및 위치보기 도면 배치 보완
2026-06-23 14:07:22 +09:00 · 2026-06-22 13:56:52 +09:00 · 2026-06-19 16:25:28 +09:00 · 2026-06-19 15:48:26 +09:00 · 2026-06-19 15:12:25 +09:00 · 2026-06-19 15:04:36 +09:00
173 changed files with 2698 additions and 17767 deletions
--- a/DESIGN-vercel.md
+++ b/DESIGN-vercel.md
@@ -1,736 +0,0 @@
 ---
 version: alpha
 name: Vercel-design-analysis
 description: An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / magenta / amber) that acts as the entire decorative system, paired with a custom geometric sans for headlines and a monospaced caption face for technical labels.
 colors:
  primary: "#171717"
  on-primary: "#ffffff"
  ink: "#171717"
  body: "#4d4d4d"
  mute: "#888888"
  hairline: "#ebebeb"
  hairline-strong: "#a1a1a1"
  canvas: "#ffffff"
  canvas-soft: "#fafafa"
  canvas-soft-2: "#f5f5f5"
  link: "#0070f3"
  link-deep: "#0761d1"
  link-bg-soft: "#d3e5ff"
  success: "#0070f3"
  error: "#ee0000"
  error-soft: "#f7d4d6"
  error-deep: "#c50000"
  warning: "#f5a623"
  warning-soft: "#ffefcf"
  warning-deep: "#ab570a"
  violet: "#7928ca"
  violet-soft: "#d8ccf1"
  violet-deep: "#4c2889"
  cyan: "#50e3c2"
  cyan-soft: "#aaffec"
  cyan-deep: "#29bc9b"
  highlight-pink: "#ff0080"
  highlight-magenta: "#eb367f"
  gradient-develop-start: "#007cf0"
  gradient-develop-end: "#00dfd8"
  gradient-preview-start: "#7928ca"
  gradient-preview-end: "#ff0080"
  gradient-ship-start: "#ff4d4d"
  gradient-ship-end: "#f9cb28"
  selection-bg: "#171717"
  selection-fg: "#f2f2f2"
 typography:
  display-xl:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: -2.4px
  display-lg:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 32px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: -1.28px
  display-md:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: -0.96px
  display-sm:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: -0.6px
  body-lg:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0px
  body-md:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body-md-strong:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  body-sm:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.28px
  body-sm-strong:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: -0.28px
  caption:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  caption-mono:
    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  code:
    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
  button-md:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  button-lg:
    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
 rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill-sm: 64px
  pill: 100px
  full: 9999px
 spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px
  section: 192px
 components:
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    height: 64px
    padding: "{spacing.sm} {spacing.lg}"
  nav-link:
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  nav-cta-signup:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm-strong}"
    rounded: "{rounded.sm}"
    padding: "0px {spacing.xs}"
    height: 28px
  nav-cta-login:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm-strong}"
    rounded: "{rounded.sm}"
    padding: "0px {spacing.xs}"
    height: 28px
  nav-cta-ask-ai:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm-strong}"
    rounded: "{rounded.sm}"
    padding: "0px {spacing.xs}"
    height: 28px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.pill}"
    padding: "0px {spacing.sm}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.pill}"
    padding: "0px {spacing.sm}"
  button-primary-sm:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px {spacing.xs}"
  button-secondary-sm:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px {spacing.xs}"
  tab-ghost:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill-sm}"
    padding: "0px {spacing.md}"
  icon-button-circular:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.full}"
  card-marketing:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  card-marketing-large:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  card-soft:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  template-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  code-editor-mockup:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  form-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "0px {spacing.sm}"
    height: 40px
  form-input-sm:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "0px {spacing.sm}"
    height: 32px
  form-input-lg:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "0px {spacing.sm}"
    height: 48px
  badge-secondary:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.body}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "0px {spacing.xs}"
  pricing-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  pricing-card-featured:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  logo-strip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    padding: "{spacing.lg} {spacing.xl}"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "{spacing.4xl} {spacing.lg}"
  feature-mesh-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "{spacing.5xl} {spacing.lg}"
  showcase-band-light:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "{spacing.5xl} {spacing.lg}"
  showcase-band-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-lg}"
    padding: "{spacing.5xl} {spacing.lg}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    padding: "{spacing.4xl} {spacing.lg}"
  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body-md}"
  banner-marketing:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───
  ex-pricing-tier:
    description: "Default tier card. Mirrors pricing-card chrome on canvas-soft surface with a hairline border."
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  ex-pricing-tier-featured:
    description: "Featured tier — polarity-flipped to ink primary with white text and white CTA."
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  ex-product-selector:
    description: "What's Included summary card — repurposed for the brand's GPU / inference / Pro feature tiers."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  ex-cart-drawer:
    description: "Subscription summary — line items per add-on (NOT a literal e-commerce cart)."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
    item-divider: "{colors.hairline}"
  ex-app-shell-row:
    description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar."
    backgroundColor: "{colors.canvas}"
    activeIndicator: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: "{spacing.xs} {spacing.sm}"
  ex-data-table-cell:
    description: "Mirrors the brand's table chrome. Header uses caption-mono uppercase mono; body uses body-sm."
    headerBackground: "{colors.canvas-soft}"
    headerTypography: "{typography.caption-mono}"
    bodyTypography: "{typography.body-sm}"
    cellPadding: "{spacing.xs} {spacing.sm}"
    rowBorder: "{colors.hairline}"
  ex-auth-form-card:
    description: "Sign-in / sign-up card. Mirrors card-marketing-large chrome with form-input primitives inside."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  ex-modal-card:
    description: "Modal dialog surface — same chrome as card-marketing-large with Level 5 modal shadow."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  ex-empty-state-card:
    description: "Empty-state illustration frame. Generous padding on canvas-soft."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.lg}"
    padding: "{spacing.3xl}"
    captionTypography: "{typography.body-md}"
  ex-toast:
    description: "Toast notification surface — flat-cornered card-marketing chrome with Level 4 shadow."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.md}"
    typography: "{typography.body-sm}"
 ---
 ## Overview
 Vercel is a developer-platform brand — the page is a deployment dashboard's marketing surface, written for engineers who already know the syntax. It earns that posture with one of the cleanest stark systems on the web: near-white `{colors.canvas-soft}` body background, ink-near-black `{colors.ink}` text, a 200-step gray scale that gives every divider, border, and disabled state its own deliberate step. The only place the brand introduces colour at marketing scale is the multi-stop mesh gradient (`{colors.gradient-develop-start}` → `{colors.gradient-preview-end}` → `{colors.gradient-ship-start}` → cyan / magenta / amber) that floats in atmospheric backdrops, never miniaturised to a swatch. That gradient is the entire decoration system.
 Type is the second decisive voice. The brand's own custom geometric sans (Geist) carries display, body, button — everything narrative — at weight 600 for display, 500 for buttons, 400 for body. A matching monospaced face (Geist Mono) carries technical labels: terminal mockups, code blocks, sometimes filename captions. Headlines are sentence-case with aggressive negative letter-spacing (`-2.4px` at 48 px hero) — the brand never letter-spaces positively, never goes uppercase outside of mono labels.
 Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow.
 **Key Characteristics:**
 - A single black-ink primary CTA `{colors.primary}` carries every conversion target, paired with white-on-white `button-secondary` for the secondary action. The brand uses 100 px pill shape for marketing CTAs and a tight 6 px square shape for in-app nav buttons.
 - A multi-stop mesh gradient (cyan-blue-magenta-amber) is the only decorative chrome — used at hero scale and inside feature-band atmospheric backdrops. It is the brand.
 - Every section eyebrow and small label uses the monospace face `{typography.caption-mono}` or `{typography.code}`; everything else is in the geometric sans.
 - Subtle stacked-shadow elevation — three offsets layered with 4-12 % black opacity — never a single heavy drop-shadow.
 - A complete 100–1000 gray + blue + red + amber + green + teal + purple + pink colour scale exists as a system token set, but the marketing surface uses only the `100`, `1000`, and `700`-level tones; the rest stay in the design-system tokens for in-product surfaces.
 - An "Active CPU" pricing rhythm: `pricing-card` lays out 3-up on the pricing page with `pricing-card-featured` (Pro tier) polarity-flipped to `{colors.primary}` against white-card siblings.
 ## Colors
 ### Brand & Accent
 - **Ink** (`{colors.primary}` — `#171717`): The single primary CTA color. Black-near-pure ink that carries every Sign Up pill, every footer CTA, the dark-band polarity-flip. Used as text color throughout the page on light surfaces. (Resolved from `--ds-gray-1000`.)
 - **Cyan** (`{colors.cyan}` — `#50e3c2`): A signature mint-cyan used in the brand gradient and inside Geist-system spotlight tokens. Visible inside the hero gradient stops.
 - **Highlight Pink** (`{colors.highlight-pink}` — `#ff0080`): The brand's highlight magenta, used as the high-saturation stop in the preview-gradient pair.
 - **Violet** (`{colors.violet}` — `#7928ca`): The deep purple used as the start of the preview-gradient and inside developer-console highlights.
 - **Link Blue** (`{colors.link}` — `#0070f3`): The brand's primary link color and the legacy `--geist-success` semantic.
 ### Surface
 - **Canvas** (`{colors.canvas}` — `#ffffff`): The pure-white card / dialog / modal surface.
 - **Canvas Soft** (`{colors.canvas-soft}` — `#fafafa`): The default page background — 98 % white. Almost every section sits on this tone.
 - **Canvas Soft 2** (`{colors.canvas-soft-2}` — `#f5f5f5`): A slightly deeper inset surface for "code editor inner background", template-card hover states, and dropdown menus.
 - **Hairline** (`{colors.hairline}` — `#ebebeb`): 1 px dividers — table rows, card borders, input borders.
 - **Hairline Strong** (`{colors.hairline-strong}` — `#a1a1a1`): The 500-level gray, used as the slightly-stronger divider on light bands and as the deemphasised text color.
 ### Text
 - **Ink** (`{colors.ink}` — `#171717`): Every heading and body paragraph on light surfaces.
 - **Body** (`{colors.body}` — `#4d4d4d`): Secondary text — sub-headings, body captions, nav-link inactive text, footer column body.
 - **Mute** (`{colors.mute}` — `#888888`): Lowest-priority text — placeholder text, fine print, low-key labels.
 - **On Primary** (`{colors.on-primary}` — `#ffffff`): All text on `{colors.primary}` surfaces.
 ### Semantic
 - **Success / Link** (`{colors.success}` — `#0070f3`): The brand's legacy success indicator doubles as the primary link color. Visible underline-on-hover for inline body links.
 - **Link Deep** (`{colors.link-deep}` — `#0761d1`): The pressed / visited tone for inline links.
 - **Link Bg Soft** (`{colors.link-bg-soft}` — `#d3e5ff`): Soft pastel blue fill for "what's new" pill banners and informational badges.
 - **Error** (`{colors.error}` — `#ee0000`): Validation red for destructive actions and form errors.
 - **Error Soft** (`{colors.error-soft}` — `#f7d4d6`): Soft pastel red for destructive-state backgrounds.
 - **Error Deep** (`{colors.error-deep}` — `#c50000`): Pressed / deep destructive state.
 - **Warning** (`{colors.warning}` — `#f5a623`): Caution / pending status indicator.
 - **Warning Soft** (`{colors.warning-soft}` — `#ffefcf`) / **Warning Deep** (`{colors.warning-deep}` — `#ab570a`): Background + pressed variants.
 ### Brand Gradient
 The brand's signature decoration is a three-pair gradient stack:
 - **Develop** (`{colors.gradient-develop-start}` `#007cf0` → `{colors.gradient-develop-end}` `#00dfd8`) — the blue-to-teal pair used to mark the "deploy" / "develop" rhythm.
 - **Preview** (`{colors.gradient-preview-start}` `#7928ca` → `{colors.gradient-preview-end}` `#ff0080`) — the violet-to-pink pair used for "preview" surfaces.
 - **Ship** (`{colors.gradient-ship-start}` `#ff4d4d` → `{colors.gradient-ship-end}` `#f9cb28`) — the coral-to-amber pair used for "ship" surfaces.
 The three pairs collapse into a single multi-color mesh gradient when used as the hero atmospheric backdrop. Treat the gradient as one unified object — do not crop down to a single colour, do not reorder the stops, and do not miniaturise. Used at hero scale only.
 ## Typography
 ### Font Family
 Two custom faces carry the entire system:
 1. **A custom geometric sans** (extracted as `Geist`) for every display, body, button, link, and label. Weights 400 / 500 / 600 are the working set; the face never appears in 700 or heavier. Display sizes are tracked aggressively negative (`-2.4 px` at 48 px hero, `-1.28 px` at 32 px section); body stays at neutral or slightly-negative tracking.
 2. **A custom monospaced face** (extracted as `Geist Mono`) for terminal mockups, code blocks, and small mono-caption labels — anything that wants to signal "technical." Weight 400 only at 12 – 13 px. Tracking neutral.
 A condensed display sans (`Space Grotesk`) is loaded as a third face for occasional editorial moments but does not render as the primary face anywhere in the captured surfaces.
 ### Hierarchy
 | Token | Size | Weight | Line Height | Letter Spacing | Use |
 |---|---|---|---|---|---|
 | `{typography.display-xl}` | 48px | 600 | 48px | -2.4px | Hero headline ("Build and deploy on the AI Cloud."). |
 | `{typography.display-lg}` | 32px | 600 | 40px | -1.28px | Section headlines ("Your frontend, delivered.", "A compute model for all workloads."). |
 | `{typography.display-md}` | 24px | 600 | 32px | -0.96px | Card-cluster headlines, pricing-tier names. |
 | `{typography.display-sm}` | 20px | 600 | 28px | -0.6px | Inline display micro-headings. |
 | `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraphs under section headlines. |
 | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body paragraph. |
 | `{typography.body-md-strong}` | 16px | 500 | 24px | 0 | Bolded inline body. |
 | `{typography.body-sm}` | 14px | 400 | 20px | -0.28px | Secondary body, nav-link text, button-md labels. |
 | `{typography.body-sm-strong}` | 14px | 500 | 20px | -0.28px | Nav CTA labels, table-row emphasis. |
 | `{typography.caption}` | 12px | 400 | 16px | 0 | Footer secondary lines, badge labels. |
 | `{typography.caption-mono}` | 12px | 400 | 16px | 0 | Section eyebrows and label captions that want a technical voice. |
 | `{typography.code}` | 13px | 400 | 20px | 0 | Inline code, terminal mockups, command snippets. |
 | `{typography.button-md}` | 14px | 500 | 20px | 0 | Small / nav-scale button labels. |
 | `{typography.button-lg}` | 16px | 500 | 24px | 0 | Marketing-scale pill button labels. |
 ### Principles
 - **Negative tracking is part of the voice.** Display sizes use aggressive `-2.4` to `-0.6` px tracking. Reverting to default tracking breaks the brand.
 - **Sentence-case headlines, period-terminated.** Headlines like "Build and deploy on the AI Cloud." end with a deliberate period — that punctuation is part of the brand's voice.
 - **Mono for the technical layer only.** Section eyebrows, code blocks, terminal mockups. Body paragraphs never set in mono.
 - **Weight 600 is the display ceiling.** The geometric sans never appears at 700 / 800. The brand reads as a calmer system because of this.
 ### Note on Font Substitutes
 The two primary faces are proprietary (custom-cut for the brand). Open-source substitutes:
 - **Geometric sans** — *Inter* (400 / 500 / 600) is the closest stylistic match; `font-feature-settings: "ss01", "ss02"` enables the geometric alternates. *Satoshi* is a passable second choice.
 - **Monospace** — *JetBrains Mono* (400) at 12 – 13 px matches the technical voice. *IBM Plex Mono* is the second-best option.
 ## Layout
 ### Spacing System
 - **Base unit**: 4 px. The brand's `--geist-space` token is exactly 4 px and every captured value is a multiple of 4.
 - **Tokens**: `{spacing.xxs}` 4 px · `{spacing.xs}` 8 px · `{spacing.sm}` 12 px · `{spacing.md}` 16 px · `{spacing.lg}` 24 px · `{spacing.xl}` 32 px · `{spacing.2xl}` 40 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px · `{spacing.5xl}` 96 px · `{spacing.6xl}` 128 px · `{spacing.section}` 192 px.
 - **Section padding**: marketing bands use `{spacing.4xl}` to `{spacing.5xl}` top/bottom. Hero bands stretch to `{spacing.section}` to give the mesh gradient room to breathe.
 - **Card interior padding**: marketing cards sit at `{spacing.lg}` to `{spacing.xl}`; template-grid cards stay tighter at `{spacing.md}` because they sit in a denser grid.
 - **Inline gap**: button rows, nav rows, and chip rows use `{spacing.sm}` to `{spacing.md}` between siblings. The brand's `--geist-gap` is exactly 24 px.
 ### Grid & Container
 - **Max width**: ~1400 px (`--ds-page-width`); the legacy `--geist-page-width` is 1200 px and still appears on some marketing surfaces. Content centres with horizontal gutters of `{spacing.lg}` 24 px on desktop, `{spacing.md}` 16 px on mobile.
 - **Column patterns**:
  - Three-feature row: 3-up at desktop, 1-up at mobile (rows like "Web Apps / Composable Commerce / Multi-tenant Platforms").
  - Tab pill row: 5-up centred row of `tab-ghost` pills.
  - Template-grid cluster: 5-up at desktop, scaling to 1-up at mobile.
  - Pricing tier grid: 3-up at desktop with the middle tier polarity-flipped.
  - Logo strip: ~5 logos wide, single row.
 ### Whitespace Philosophy
 The mesh gradient does most of the heavy decorative lifting; whitespace separates the bands. Section spacing is generous — `{spacing.4xl}` to `{spacing.5xl}` between bands lets the gradient breathe. Inside a card, the headline/paragraph stack is tight (`{spacing.xs}` 8 px gap), then a wider gap before the CTA cluster. The page reads as engineered — large gaps + tight interior, never the other way around.
 ### Responsive Strategy
 #### Breakpoints
 | Name | Width | Key Changes |
 |---|---|---|
 | Mobile | < 600px | Hero stacks; nav collapses to hamburger; 3-up feature grids drop to 1-up; tab pill row enables horizontal scroll. |
 | Tablet | 600–959px | 3-up grids drop to 2-up; nav still horizontal. |
 | Desktop | 960–1199px | Full 3-up grids; pricing 3-up. |
 | Wide | 1200–1399px | Container caps at 1400 px content width. |
 | Ultra-wide | ≥ 1400px | Content stays centred at 1400 px; bands stretch edge-to-edge in colour but content holds the max-width. |
 #### Touch Targets
 The `button-primary` pill renders at ~32 px tall in nav and ~48 px tall in marketing contexts. Marketing CTAs comfortably meet WCAG AAA at all breakpoints; nav buttons inflate touch area through `{spacing.xs}` padding on mobile to meet the 44 × 44 px floor.
 #### Collapsing Strategy
 - **Nav**: full link row + Ask AI / Log In / Sign Up pills at desktop. Collapses to logo + hamburger at mobile with the menu opening as a full-overlay.
 - **Hero**: mesh gradient stays centred; headline + body stack vertically at all breakpoints (the brand doesn't use a split-hero pattern).
 - **Three-feature row**: 3-up → 2-up → 1-up at the breakpoints above; cards keep their `{rounded.md}` 8 px shape across all viewports.
 - **Pricing card grid**: 3-up at desktop, vertical stack at mobile with `pricing-card-featured` always sitting in the middle.
 - **Template grid**: 5-up → 3-up → 2-up → 1-up. Each `template-card` keeps its 16:9 aspect on the image.
 #### Image Behavior
 - **Mesh gradient**: rendered as inline SVG or canvas-painted gradient; scales fluidly with the hero container; never crops, never tiles.
 - **Customer logos**: rendered as monochrome SVGs in the logo strip; consistent 24 px height.
 - **Code editor mockup**: dark `{colors.primary}` rectangle with mono text rendered inside; treated as an image at the layout level.
 - **Template thumbnails**: 16:9 landscape inside `{rounded.md}` card chrome; lazy-loaded; consistent grayscale palette in the placeholder state.
 ## Elevation & Depth
 | Level | Treatment | Use |
 |---|---|---|
 | Level 0 — Flat | No shadow, no border. | Full-bleed hero bands and the polarity-flipped dark sections. |
 | Level 1 — Inset Hairline | `0 0 0 1px #00000014` inset 1 px border. | Default card chrome — the brand's universal "you can see this card" cue. |
 | Level 2 — Subtle Drop | `0px 1px 1px #00000005, 0px 2px 2px #0000000a` plus inset hairline. | Slightly elevated cards (template-grid, marketing-card). |
 | Level 3 — Soft Stack | `0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a` plus inset hairline. | The "medium" elevation — feature-grid cards. |
 | Level 4 — Float Stack | `0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a` plus inset hairline. | "Large" elevation — pricing cards, callout panels. |
 | Level 5 — Modal | `0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f` plus inset hairline. | Modal / dialog surfaces and dropdown menus. |
 The brand uses STACKED shadows — multiple small offsets layered to fake natural light — never a single 8-px-blur generic drop. Inset hairline rings are always added so the card edge stays crisp.
 ### Decorative Depth
 - **Mesh gradient as atmospheric depth**: the hero's multi-stop gradient is the brand's only "atmospheric" effect — applied as a flat 2-D backdrop rather than a 3-D illustration.
 - **Polarity-flipped dark band as section-depth**: switching the surface from `{colors.canvas-soft}` to `{colors.primary}` (the deep ink) is the brand's chief depth cue between bands.
 - **Inset-shadow + drop-shadow combo**: the cards' combination of an inset 1 px ring and a multi-stop drop produces a "card sits on the page" effect without ever feeling material-heavy.
 ## Shapes
 ### Border Radius Scale
 | Token | Value | Use |
 |---|---|---|
 | `{rounded.none}` | 0px | Full-bleed hero / footer bands. |
 | `{rounded.xs}` | 4px | Tightest inline pill — the `nav-cta-signup` 6-px-radius button (mapped to `xs/sm`). |
 | `{rounded.sm}` | 6px | The brand's `--geist-radius` token — base UI radius for in-app buttons, form inputs, dropdown menus. |
 | `{rounded.md}` | 8px | The brand's `--geist-marketing-radius` token — feature cards, template cards. |
 | `{rounded.lg}` | 12px | Slightly larger card chrome (pricing-card variants). |
 | `{rounded.xl}` | 16px | Largest card chrome — when a card hosts a hero image cap. |
 | `{rounded.pill-sm}` | 64px | Tab-ghost pills inside the "AI Apps / Web Apps / Ecommerce / Marketing / Platforms" row. |
 | `{rounded.pill}` | 100px | The marketing CTA pill — `button-primary`, `button-secondary`, "Start Deploying" pill. |
 | `{rounded.full}` | 9999px | Icon-button circular containers, nav-link ghost pills. |
 ### Photography Geometry
 - **Mesh gradient**: full-bleed 2-D atmospheric backdrop, never cropped to a frame; treated as the page's wallpaper.
 - **Customer logos**: monochrome SVG, consistent 24 px height in a flex row.
 - **Code editor mockup**: 16:10 dark rectangle, `{rounded.md}` corners.
 - **Template thumbnails**: 16:9 landscape inside `{rounded.md}` chrome.
 - **Showcase imagery**: 2:1 or 16:9 inside `{rounded.lg}` to `{rounded.xl}` chrome with a stacked shadow.
 ## Components
 ### Buttons
 **`button-primary`** — the canonical 100-px-radius black pill, marketing scale.
 - Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.button-lg}`, padding `0px {spacing.sm}` 12 px, shape `{rounded.pill}` 100 px. Renders ~48 px tall when paired with the marketing flex layout.
 **`button-secondary`** — the white pill paired with the black primary inside marketing bands.
 - Background `{colors.canvas}`, text `{colors.ink}`, same typography + padding as `button-primary`, shape `{rounded.pill}`.
 **`button-primary-sm`** — the smaller-scale primary pill used inside nav and pricing-card CTAs.
 - Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.button-md}` (14 px / 500), shape `{rounded.pill}`.
 **`button-secondary-sm`** — the smaller-scale white pill paired with `button-primary-sm`.
 - Background `{colors.canvas}`, text `{colors.ink}`, same typography + shape as `button-primary-sm`.
 **`tab-ghost`** — the centred-row tab pill ("AI Apps / Web Apps / Ecommerce / Marketing / Platforms").
 - Background `{colors.canvas}`, text `{colors.ink}`, label set in `{typography.body-sm}`, padding `0px {spacing.md}`, shape `{rounded.pill-sm}` 64 px.
 **`icon-button-circular`** — the circular icon container (often a "?" or arrow inside).
 - Background `{colors.canvas}`, dark icon, 1 px solid hairline border, shape `{rounded.full}`.
 **Nav CTAs:**
 **`nav-cta-signup`** — the small black "Sign Up" button in the nav row.
 - Background `{colors.primary}`, text `{colors.on-primary}`, label `{typography.body-sm-strong}`, padding `0px {spacing.xs}`, height 28 px, shape `{rounded.sm}` 6 px (the brand's `--geist-radius`).
 **`nav-cta-login`** — the white "Log In" button in the nav.
 - Background `{colors.canvas}`, text `{colors.ink}`, same typography / height / shape as `nav-cta-signup`.
 **`nav-cta-ask-ai`** — the small "Ask AI" button with a faint border.
 - Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border (extracted as `0px solid rgb(235, 235, 235)`), same typography / height / shape.
 ### Cards & Containers
 **`card-marketing`** — the canonical marketing feature card (3-up section cards).
 - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg}` 24 px, shape `{rounded.md}` 8 px (the `--geist-marketing-radius`). Carries Level 3 soft-stack shadow.
 **`card-marketing-large`** — the larger marketing card used for "compute model" / "AI Gateway" callouts.
 - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.lg}` 12 px. Carries Level 4 float-stack shadow.
 **`card-soft`** — the soft-tinted card used inside cluster groups (lighter than canvas-soft).
 - Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.lg}`, shape `{rounded.md}`.
 **`template-card`** — the deploy-template card in the "Deploy your first app" grid.
 - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md}` 16 px, shape `{rounded.md}` 8 px. Hosts a 16:9 thumbnail at the top.
 **`code-editor-mockup`** — the dark code-preview surface inside marketing bands.
 - Background `{colors.primary}`, text `{colors.on-primary}`, body in `{typography.code}` (13 px / Geist Mono), padding `{spacing.lg}` 24 px, shape `{rounded.md}` 8 px.
 **`pricing-card`** — the default pricing-tier card.
 - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}` 32 px, shape `{rounded.lg}` 12 px. Inside: tier name in `{typography.display-md}`, price in `{typography.display-xl}`, feature list in `{typography.body-md}` rows, CTA at the bottom.
 **`pricing-card-featured`** — the polarity-flipped "Pro" tier card.
 - Background `{colors.primary}`, text `{colors.on-primary}`, same shape + padding as `pricing-card`. CTA inverts to `button-secondary-sm` (white pill on black card).
 ### Inputs & Forms
 **`form-input`** — the canonical text input.
 - Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, body in `{typography.body-sm}` (14 px), padding `0px {spacing.sm}`, height 40 px (the brand's `--geist-form-height`), shape `{rounded.sm}` 6 px.
 **`form-input-sm`** — small-height variant (32 px tall) for tight forms.
 - Same as `form-input` but height 32 px (the `--geist-form-small-height`).
 **`form-input-lg`** — large-height variant (48 px tall) for hero CTAs.
 - Same as `form-input` but height 48 px (the `--geist-form-large-height`); body in `{typography.body-md}` 16 px.
 ### Navigation
 **`nav-bar`** — the sticky top nav.
 - Background `{colors.canvas}`, text `{colors.ink}`, height 64 px (the brand's `--header-height`), padding `{spacing.sm} {spacing.lg}`. Layout: logo left, link row centre, "Ask AI / Log In / Sign Up" cluster right.
 **`nav-link`** — the centred link row inside `nav-bar`.
 - Text `{colors.body}`, set in `{typography.body-sm}`, padding `{spacing.xs} {spacing.sm}`, shape `{rounded.full}` (ghost pill — visible only on hover or active, but the radius is documented).
 **`footer`** — the bottom 4-column nav.
 - Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.4xl} {spacing.lg}`. Eyebrow column labels in `{typography.caption-mono}` (uppercase mono effect); link rows in `{typography.body-sm}`.
 ### Signature Components
 **`hero-band`** — the white hero with the mesh gradient backdrop.
 - Background `{colors.canvas}` (or `{colors.canvas-soft}` on some surfaces), text `{colors.ink}`, padding `{spacing.4xl} {spacing.lg}`. Inside: a small mono badge above the headline, the headline in `{typography.display-xl}` (sentence-case, period-terminated), a body lead in `{typography.body-lg}`, then a CTA row with `button-primary` + `button-secondary`. The mesh gradient sits behind, scaled to occupy roughly the top half of the band.
 **`feature-mesh-band`** — the secondary section that hosts a mesh-gradient atmospheric backdrop with feature copy on top.
 - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.lg}`. Section headline in `{typography.display-lg}`; supporting body in `{typography.body-md}`.
 **`showcase-band-light`** — a soft-canvas section ("Deploy your first app in seconds").
 - Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.lg}`.
 **`showcase-band-dark`** — the polarity-flipped dark band ("A compute model for all workloads").
 - Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.5xl} {spacing.lg}`. Section headline in `{typography.display-lg}` (white on black). Often contains a `code-editor-mockup` flush with the band.
 **`logo-strip`** — the customer-logo wrapping row near the top of the page.
 - Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.lg} {spacing.xl}`. Logos rendered as monochrome SVGs at consistent height.
 **`badge-secondary`** — the small inline metadata pill ("New", "Beta", "Live").
 - Background `{colors.canvas-soft}`, text `{colors.body}`, body in `{typography.caption}`, padding `0px {spacing.xs}`, shape `{rounded.full}`.
 **`banner-marketing`** — the "Introducing X" announcement pill at the top of pages.
 - Background `{colors.canvas-soft}`, text `{colors.body}`, body in `{typography.body-sm}`, padding `{spacing.xs} {spacing.sm}`, shape `{rounded.full}`.
 **`link-inline`** — body-copy inline links.
 - Text `{colors.link}` (`#0070f3`), body in `{typography.body-md}`, underlined.
 ### Examples (illustrative)
 > Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.
 **`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.
 - Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`
 **`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
 - Properties: `backgroundColor`, `textColor`, `rounded`, `padding`
 **`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
 - Properties: `backgroundColor`, `rounded`, `padding`
 **`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).
 - Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`
 **`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.
 - Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`
 **`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
 - Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`
 **`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
 - Properties: `backgroundColor`, `rounded`, `padding`
 **`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.
 - Properties: `backgroundColor`, `rounded`, `padding`
 **`ex-empty-state-card`** — Empty-state illustration frame.
 - Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`
 **`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.
 - Properties: `backgroundColor`, `rounded`, `padding`, `typography`
 ## Do's and Don'ts
 ### Do
 - Reserve `{colors.primary}` (`#171717`) for primary CTAs across the page. Black ink IS the conversion target.
 - Use `{rounded.pill}` 100 px for every marketing-scale CTA and `{rounded.sm}` 6 px for nav-scale buttons. The two pill scales coexist deliberately.
 - Set every headline in `{typography.display-*}` weight 600, sentence-case, often period-terminated. Aggressive negative tracking is part of the voice.
 - Use the brand mesh gradient as atmospheric decoration at hero scale only — never miniaturise it to an icon, never reduce to a single colour.
 - Layer stacked shadows (multiple small offsets with inset hairline) rather than single heavy drops. The brand's elevation is calmer than Material.
 - Cycle page surfaces in `{colors.canvas-soft}` → `{colors.canvas}` → `{colors.primary}` polarity-flipped bands; the dark band IS the depth cue.
 - Set every code block and technical eyebrow in `{typography.code}` / `{typography.caption-mono}`. Mono is the voice of the platform.
 ### Don't
 - Don't introduce a sixth accent colour. The brand operates with ink + gray + the four-pair gradient palette; new accents flatten the voice.
 - Don't render headlines in all-caps. Sentence-case + negative tracking is non-negotiable.
 - Don't drop a single heavy drop-shadow on cards. The brand's elevation is built from stacked small offsets + inset hairline rings.
 - Don't render the brand gradient at icon scale or in a single-colour reduced form. The gradient lives at hero scale only.
 - Don't promote the geometric sans to weight 700. The brand's display ceiling is 600.
 - Don't pair the marketing 100-px pill CTA shape with the 6-px nav radius on the same screen — pick a scale and stay there.
 - Don't set body paragraphs in the mono face. The mono is for code + technical labels only.
--- a/PC_사양_적정성_분석_기획서.html
+++ b/PC_사양_적정성_분석_기획서.html
@@ -1,429 +0,0 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PC 사양 적정성 분석 기획서 (GPU 반영)</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #4F46E5;
      --primary-light: #EEF2FF;
      --secondary: #10B981;
      --secondary-light: #D1FAE5;
      --danger: #EF4444;
      --danger-light: #FEE2E2;
      --warning: #F59E0B;
      --warning-light: #FEF3C7;
      --purple: #7C3AED;
      --purple-light: #EDE9FE;
      --text-dark: #0F172A;
      --text-body: #334155;
      --text-muted: #64748B;
      --border: #E2E8F0;
      --bg-light: #F8FAFC;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Outfit', 'Noto Sans KR', sans-serif;
      color: var(--text-body);
      background: #fff;
      letter-spacing: -0.02em;
      line-height: 1.7;
    }
    .page { max-width: 980px; margin: 0 auto; padding: 3rem 2rem; }
    /* ─ Header ─ */
    .doc-header { border-bottom: 3px solid var(--text-dark); padding-bottom: 1.75rem; margin-bottom: 3rem; }
    .doc-label {
      display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--primary);
      background: var(--primary-light); padding: 0.25rem 0.75rem; border-radius: 99px;
      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;
    }
    .version-badge {
      display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--secondary);
      background: var(--secondary-light); padding: 0.2rem 0.6rem; border-radius: 99px;
      margin-left: 0.5rem; vertical-align: middle;
    }
    .doc-header h1 { font-size: 2rem; font-weight: 900; color: var(--text-dark); line-height: 1.25; margin-bottom: 1rem; }
    .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
    .meta-item { background: var(--bg-light); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.83rem; }
    .meta-item .label { color: var(--text-muted); display: block; font-size: 0.75rem; }
    .meta-item .val { font-weight: 700; color: var(--text-dark); font-size: 0.9rem; }
    /* ─ Sections ─ */
    section { margin-bottom: 3.5rem; }
    h2 {
      font-size: 1.3rem; font-weight: 800; color: var(--text-dark);
      padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);
      margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem;
    }
    h2 .num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; background: var(--primary); color: #fff;
      border-radius: 50%; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
    }
    h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 1.75rem 0 0.75rem; }
    p { margin-bottom: 1rem; color: var(--text-body); font-size: 0.97rem; }
    /* ─ Boxes ─ */
    .box { border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; font-size: 0.93rem; }
    .box-blue   { background: var(--primary-light);  border-left: 4px solid var(--primary); }
    .box-green  { background: var(--secondary-light); border-left: 4px solid var(--secondary); }
    .box-yellow { background: var(--warning-light);  border-left: 4px solid var(--warning); }
    .box-red    { background: var(--danger-light);   border-left: 4px solid var(--danger); }
    .box-purple { background: var(--purple-light);   border-left: 4px solid var(--purple); }
    .box-title  { font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; font-size: 0.95rem; }
    /* ─ Score formula block ─ */
    .formula {
      background: #1E293B; color: #E2E8F0; border-radius: 8px;
      padding: 1rem 1.25rem; font-family: 'Courier New', monospace;
      font-size: 0.87rem; margin: 1rem 0; overflow-x: auto; line-height: 2;
    }
    .formula .comment { color: #64748B; }
    .formula .key { color: #93C5FD; }
    .formula .val { color: #6EE7B7; }
    .formula .warn { color: #FCD34D; }
    /* ─ Three-col score grid ─ */
    .score-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.5rem 0; }
    @media(max-width: 700px) { .score-grid-3 { grid-template-columns: 1fr; } }
    .score-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    .score-card-header {
      background: var(--bg-light); padding: 0.65rem 1rem;
      font-weight: 700; font-size: 0.88rem; color: var(--text-dark);
      border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem;
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
    .dot-green  { background: var(--secondary); }
    .dot-purple { background: var(--purple); }
    /* ─ Tables ─ */
    .tbl-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.25rem 0; }
    table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    th { background: var(--bg-light); padding: 0.65rem 1rem; font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
    td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--bg-light); }
    /* ─ Badges ─ */
    .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
    .b-primary { color: var(--primary); background: var(--primary-light); }
    .b-green  { color: #065F46; background: var(--secondary-light); }
    .b-red    { color: #991B1B; background: var(--danger-light); }
    .b-yellow { color: #92400E; background: var(--warning-light); }
    .b-purple { color: #5B21B6; background: var(--purple-light); }
    /* ─ Flow ─ */
    .flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 1.5rem 0; }
    .flow-step { background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 0.83rem; padding: 0.55rem 0.9rem; border-radius: 8px; text-align: center; }
    .flow-step.gpu { background: var(--purple-light); color: var(--purple); }
    .flow-arrow { font-size: 1.1rem; color: var(--text-muted); padding: 0 0.4rem; }
    /* ─ GPU tier table highlight ─ */
    .tier-S td:first-child { font-weight: 800; color: #DC2626; }
    .tier-A td:first-child { font-weight: 700; color: var(--primary); }
    .tier-B td:first-child { font-weight: 700; color: var(--secondary); }
    .tier-C td:first-child { color: var(--warning); font-weight: 600; }
    .tier-D td:first-child { color: var(--text-muted); }
    footer { border-top: 1px solid var(--border); margin-top: 4rem; padding-top: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
  </style>
 </head>
 <body>
 <div class="page">
  <!-- HEADER -->
  <header class="doc-header">
    <div class="doc-label">기능 명세서 <span class="version-badge">v3.0 — 100점 감점제 반영</span></div>
    <h1>PC 사양 적정성 분석 기획서<br>
      <span style="font-size:1.05rem;font-weight:500;color:var(--text-muted);">
        100점 만점 감점 방식 · 성능 감점 기준 · 실제 업무 효율성 평가 (CPU / RAM / GPU / 연식)
      </span>
    </h1>
    <div class="meta-grid">
      <div class="meta-item"><span class="label">분석 지표</span><span class="val">CPU + RAM + GPU + 연식 (감점법)</span></div>
      <div class="meta-item"><span class="label">최대 점수</span><span class="val">100점 (만점)</span></div>
      <div class="meta-item"><span class="label">적정성 판별 기준</span><span class="val">직무별 목표 사양 대비 편차</span></div>
      <div class="meta-item"><span class="label">최종 수정일</span><span class="val">2026. 05. 31</span></div>
    </div>
  </header>
  <!-- 1. 개요 -->
  <section>
    <h2><span class="num">1</span>개요 — 100점 만점 감점형 성능 점수 체계</h2>
    <p>
      v3.0부터 PC 사양 점수는 <strong>100점 만점 기준 감점제</strong>로 산출됩니다.
      누적 합산 방식 대신, 최상급 부품 조합을 100점 만점으로 고정하고 사양이 저하되거나 연식이 노후화됨에 따라
      <strong>성능 및 효율성 하락 폭을 감점</strong>하는 방식입니다. 이는 실제 업무 환경에서 PC 노후도에 따른
      체감 생산성 저하를 훨씬 직관적이고 현실적으로 드러냅니다.
    </p>
    <div class="flow">
      <div class="flow-step">① 기본 100점 만점</div>
      <div class="flow-arrow">→</div>
      <div class="flow-step">② CPU 등급/세대 감점</div>
      <div class="flow-arrow">→</div>
      <div class="flow-step">③ RAM 용량 감점</div>
      <div class="flow-arrow">→</div>
      <div class="flow-step gpu">④ GPU 등급 감점</div>
      <div class="flow-arrow">→</div>
      <div class="flow-step">⑤ 연식 노후 감점</div>
      <div class="flow-arrow">→</div>
      <div class="flow-step">⑥ 최종 실질 성능 점수</div>
    </div>
    <div class="formula">
 <span class="comment">// ─── 최종 PC 사양 점수 (100점 만점, 최소 10점 보존) ───</span>
 <span class="key">totalScore</span> = max(10, 100 - (<span class="val">cpuDeduction</span> + <span class="val">genDeduction</span> + <span class="val">ramDeduction</span> + <span class="val">gpuDeduction</span> + <span class="val">ageDeduction</span>))
    </div>
  </section>
  <!-- 2. CPU 감점 룰 -->
  <section>
    <h2><span class="num">2</span>CPU 사양 감점 기준</h2>
    <p>CPU 감점은 <strong>등급 감점(최대 -30점)</strong>과 <strong>세대 노후 감점(최대 -15점)</strong>의 합산입니다.</p>
    <div class="formula">
 <span class="comment">// [CPU 등급 감점]</span>
 i9 / Ryzen 9  → <span class="val">0점 감점</span>
 i7 / Ryzen 7  → <span class="val">-5점 감점</span>
 i5 / Ryzen 5  → <span class="val">-15점 감점</span>
 i3 / Ryzen 3  → <span class="val">-25점 감점</span>
 기타           → <span class="val">-30점 감점</span>
 <span class="comment">// [CPU 세대 노후 감점]</span>
 최신 세대 (Intel 12~14세대, Ryzen 5000~7000시리즈 이상) → <span class="val">0점 감점</span>
 과도기 세대 (Intel 10~11세대, Ryzen 3000시리즈)       → <span class="val">-5점 감점</span>
 구형 세대 (Intel 8~9세대, Ryzen 1000~2000시리즈)       → <span class="val">-10점 감점</span>
 노후 세대 (Intel 7세대 이하, 구형 AMD)                 → <span class="val">-15점 감점</span>
    </div>
    <h3>CPU 조합별 감점 예시</h3>
    <div class="tbl-wrap">
      <table>
        <thead><tr><th>모델</th><th>세대 구분</th><th>등급감점</th><th>세대감점</th><th>CPU 감점 합계</th></tr></thead>
        <tbody>
          <tr><td>i9-13900K</td><td>최신 세대</td><td>0</td><td>0</td><td><strong>0점 (감점 없음)</strong></td></tr>
          <tr><td>i7-14700K</td><td>최신 세대</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
          <tr><td>i7-1360P</td><td>최신 세대 (노트북)</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
          <tr><td>i5-12400</td><td>최신 세대</td><td>-15</td><td>0</td><td><strong>-15점</strong></td></tr>
          <tr><td>i7-9700</td><td>구형 세대</td><td>-5</td><td>-10</td><td><strong>-15점</strong></td></tr>
          <tr><td>i5-8500</td><td>구형 세대</td><td>-15</td><td>-10</td><td><strong>-25점</strong></td></tr>
          <tr><td>i7-7700</td><td>노후 세대</td><td>-5</td><td>-15</td><td><strong>-20점</strong></td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <!-- 3. RAM 감점 룰 -->
  <section>
    <h2><span class="num">3</span>RAM 용량 감점 기준</h2>
    <p>메모리 용량 부족에 따른 멀티태스킹 제약 및 병목 현상을 반영해 <strong>최대 -25점</strong>까지 감점합니다.</p>
    <div class="tbl-wrap">
      <table>
        <thead><tr><th>RAM 용량</th><th>감점 점수</th><th>영향도</th><th>평가</th></tr></thead>
        <tbody>
          <tr><td>32GB 이상</td><td><strong>0점 (감점 없음)</strong></td><td>대용량 3D 및 개발 작업 원활</td><td><span class="badge b-green">최적</span></td></tr>
          <tr><td>16GB</td><td><strong>-10점 감점</strong></td><td>일반 사무용 및 가벼운 멀티태스킹 적합</td><td><span class="badge b-primary">보통</span></td></tr>
          <tr><td>8GB</td><td><strong>-20점 감점</strong></td><td>브라우저 탭 다수 실행 시 물리 메모리 부족</td><td><span class="badge b-yellow">주의</span></td></tr>
          <tr><td>8GB 미만</td><td><strong>-25점 감점</strong></td><td>기본 OS 구동 외 심각한 메모리 병목</td><td><span class="badge b-red">부족</span></td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <!-- 4. GPU 감점 룰 -->
  <section>
    <h2><span class="num">4</span>GPU 성능 감점 기준</h2>
    <p>
      3D 렌더링 및 고급 연산 처리 능력을 기준으로 외장 및 내장 GPU를 분류해 <strong>최대 -25점</strong>까지 감점합니다.
      GPU 정보가 감지되지 않거나 없는 경우 기본적으로 내장 그래픽 수준인 -25점을 감점합니다.
    </p>
    <div class="tbl-wrap">
      <table>
        <thead><tr><th>등급</th><th>제품군 구분</th><th>대표 모델</th><th>감점 점수</th><th>적합 작업</th></tr></thead>
        <tbody>
          <tr class="tier-S"><td>S</td><td>최상위 외장 GPU</td><td>RTX 4070~4090, RTX A4000~A6000</td><td><strong>0점 (감점 없음)</strong></td><td>3D 그래픽, AI 연산, VR</td></tr>
          <tr class="tier-A"><td>A</td><td>메인스트림 외장 GPU</td><td>RTX 3060~3070, RTX 2060, RTX A2000</td><td><strong>-5점 감점</strong></td><td>중급 개발, CAD 설계</td></tr>
          <tr class="tier-B"><td>B</td><td>엔트리 외장 GPU</td><td>GTX 1660, GTX 1060, RX 6600</td><td><strong>-15점 감점</strong></td><td>기본 CAD, 그래픽 보조</td></tr>
          <tr class="tier-C"><td>C</td><td>내장 그래픽 및 기타</td><td>Intel Iris Xe, UHD Graphics, Vega, GPU 없음</td><td><strong>-25점 감점</strong></td><td>오피스 사무, 문서 작업</td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <!-- 5. 종합 점수 감점 사례 -->
  <section>
    <h2><span class="num">5</span>감점법 종합 점수 계산 실사례</h2>
    <div class="tbl-wrap">
      <table>
        <thead>
          <tr><th>모델명</th><th>CPU 사양 (감점)</th><th>RAM 사양 (감점)</th><th>GPU 사양 (감점)</th><th>연식 (감점)</th><th>감점 총합</th><th>최종 점수</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>HP ZBook Fury 16</td><td>Ryzen 9 7900X (0)</td><td>64GB (0)</td><td>NVIDIA RTX A2000 (-5)</td><td>2년차 (-6)</td><td>-11</td><td><strong>89점</strong></td>
          </tr>
          <tr>
            <td>Dell Precision 5680</td><td>i9-13900K (0)</td><td>64GB (0)</td><td>NVIDIA RTX 4070 (0)</td><td>2년차 (-6)</td><td>-6</td><td><strong>94점</strong></td>
          </tr>
          <tr>
            <td>LG Gram 17 Pro</td><td>i7-14700K (-5)</td><td>32GB (0)</td><td>NVIDIA RTX 4060 (-5)</td><td>1년차 (-3)</td><td>-13</td><td><strong>87점</strong></td>
          </tr>
          <tr>
            <td>LG Gram 16</td><td>i7-1360P (-5)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-49</td><td><strong>51점</strong></td>
          </tr>
          <tr>
            <td>Samsung Galaxy Book 3</td><td>i5-1340P (-15)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-59</td><td><strong>41점</strong></td>
          </tr>
          <tr>
            <td>HP EliteBook 840</td><td>Ryzen 5 5600X (-15)</td><td>16GB (-10)</td><td>AMD Radeon Vega (-25)</td><td>4년차 (-12)</td><td>-62</td><td><strong>38점</strong></td>
          </tr>
          <tr>
            <td>HP ProDesk 400 G5</td><td>i3-8100 (-35)</td><td>8GB (-20)</td><td>Intel UHD 630 (-25)</td><td>5년 이상 (-15)</td><td>-95</td><td><strong>10점(보존)</strong></td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
  <!-- 6. 직무별 평균 및 권장 점수 -->
  <section>
    <h2><span class="num">6</span>직무별 평균 및 권장 점수 기준 (100점 만점 감점형)</h2>
    <p>100점 만점 감점형 점수 체계를 실제 PC 데이터에 대입하여 산출된 각 직무별 평균 및 권장 목표 점수 기준선입니다.</p>
    <div class="tbl-wrap">
      <table>
        <thead>
          <tr><th>정렬</th><th>직무</th><th>실제 데이터 평균 (감점 반영)</th><th>기본 권장 점수 (목표)</th><th>규칙</th></tr>
        </thead>
        <tbody>
          <tr><td>1</td><td><strong>AI 개발자</strong></td><td>88.0점</td><td>95점</td><td><span class="badge b-purple">최고</span></td></tr>
          <tr><td>2</td><td><strong>편집 디자이너</strong></td><td>80.2점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
          <tr><td>3</td><td><strong>3D 디자이너</strong></td><td>78.4점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
          <tr><td>4</td><td><strong>UXUI 디자이너</strong></td><td>72.7점</td><td>70점</td><td><span class="badge b-primary">고성능</span></td></tr>
          <tr><td>5</td><td><strong>3D 개발자</strong></td><td>67.8점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
          <tr><td>6</td><td><strong>프로그램 개발자</strong></td><td>67.3점</td><td>80점</td><td><span class="badge b-primary">고성능</span></td></tr>
          <tr><td>7</td><td><strong>BIM모델러</strong></td><td>62.1점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
          <tr><td>8</td><td><strong>엔지니어</strong></td><td>42.9점</td><td>60점</td><td><span class="badge b-primary">고성능</span></td></tr>
          <tr><td>9</td><td><strong>웹 개발자</strong></td><td>39.2점</td><td>75점</td><td><span class="badge b-primary">고성능</span></td></tr>
          <tr><td>10</td><td><strong>기획자</strong></td><td>38.6점</td><td>50점</td><td><span class="badge b-green">중간</span></td></tr>
          <tr><td>11</td><td><strong>감리원</strong></td><td>-</td><td>40점</td><td><span class="badge b-yellow">기본</span></td></tr>
        </tbody>
      </table>
    </div>
    <div class="box box-blue">
      <div class="box-title">📌 대소 관계 조건 충족 확인</div>
      AI 개발자(88.0) &gt; 편집 디자이너(80.2) &gt; 3D 디자이너(78.4) &gt; UXUI 디자이너(72.7) &gt; 3D 개발자(67.8) &gt; 프로그램 개발자(67.3) &gt; BIM모델러(62.1) &gt; 엔지니어(42.9) &gt; 웹 개발자(39.2) &gt; 기획자(38.6) ✅
    </div>
  </section>
  <!-- 7. 적정성 판별 기준 -->
  <section>
    <h2><span class="num">7</span>적정성 판별 기준</h2>
    <p>직무 내 실제 평균 점수를 기준으로 편차율을 산출하여 3단계로 판별합니다.</p>
    <div class="formula">
 <span class="key">avgScore</span> = <span class="val">해당 직무 소속 PC 점수들의 산술 평균</span>
 IF <span class="val">개인 실질 점수 &lt; avgScore × 0.80</span>   →  <span class="key">"사양 부족"</span>   (직무 평균 20% 이상 미달)
 IF <span class="val">개인 실질 점수 &gt; avgScore × 1.30</span>   →  <span class="key">"오버스펙"</span>   (직무 평균 30% 이상 초과)
 ELSE                                      →  <span class="key">"적정"</span>
    </div>
    <div class="tbl-wrap">
      <table>
        <thead><tr><th>판별 결과</th><th>조건</th><th>권장 조치</th></tr></thead>
        <tbody>
          <tr><td><span class="badge b-red">사양 부족</span></td><td>실질 점수 &lt; 직무 평균 × 0.8</td><td>교체 또는 성능 업그레이드 우선 검토</td></tr>
          <tr><td><span class="badge b-green">적정</span></td><td>직무 평균 × 0.8 ≤ 실질 점수 ≤ 직무 평균 × 1.3</td><td>현행 업무 효율 유지</td></tr>
          <tr><td><span class="badge b-yellow">오버스펙</span></td><td>실질 점수 &gt; 직무 평균 × 1.3</td><td>과스펙 장비 회수 또는 필요 부서 재배치</td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <!-- 8. 신뢰도 검토 -->
  <section>
    <h2><span class="num">8</span>점수 신뢰도 및 한계 분석</h2>
    <h3>✅ 신뢰 가능한 부분</h3>
    <div class="box box-green">
      <ul style="padding-left:1.25rem;margin:0;line-height:2.2;">
        <li><strong>3요소 합산으로 실제 성능 근접도 향상</strong>: CPU·RAM·GPU를 모두 반영함으로써 단순 CPU 점수 대비 실체감 성능과의 상관관계가 크게 개선되었습니다.</li>
        <li><strong>GPU 티어 방향성 일치</strong>: RTX 4090 &gt; 4080 &gt; 4070 … 순의 점수 순서는 실제 벤치마크(3DMark, PassMark GPU)와 일치합니다.</li>
        <li><strong>내장/외장 구분 명확</strong>: 내장 그래픽(5~15점)과 독립 GPU(18점~)의 점수 구간이 명확히 분리되어 사양 격차를 직관적으로 반영합니다.</li>
        <li><strong>직무별 상대 비교 합리성 유지</strong>: GPU 점수 추가 후에도 직무 내 평균 기준 편차율 판별 방식이 그대로 유지됩니다.</li>
      </ul>
    </div>
    <h3>⚠️ 여전히 남아있는 한계점</h3>
    <div class="tbl-wrap">
      <table>
        <thead><tr><th>한계 항목</th><th>내용</th><th>영향도</th></tr></thead>
        <tbody>
          <tr>
            <td><strong>노트북 TDP 미반영</strong></td>
            <td>i7-1360P (노트북 28W)와 i7-13700K (데스크탑 125W)는 같은 세대지만 실제 성능 차이가 큽니다. 현재는 동일 점수가 부여됩니다.</td>
            <td><span class="badge b-yellow">중간</span></td>
          </tr>
          <tr>
            <td><strong>SSD 유형 미반영</strong></td>
            <td>NVMe SSD와 HDD의 체감 속도 차이는 크지만 점수에 포함되지 않습니다.</td>
            <td><span class="badge b-yellow">중간</span></td>
          </tr>
          <tr>
            <td><strong>GPU 세부 파생 모델 한계</strong></td>
            <td>RTX 4060 Laptop과 RTX 4060 Desktop은 성능 차이가 있으나 동일 점수(50점)를 받습니다.</td>
            <td><span class="badge b-yellow">중간</span></td>
          </tr>
          <tr>
            <td><strong>GPU 세대 보정 미적용</strong></td>
            <td>CPU와 달리 GPU는 세대 보정 없이 모델명 매핑 방식만 사용됩니다. 향후 세대별 보정을 검토할 수 있습니다.</td>
            <td><span class="badge b-primary">낮음</span></td>
          </tr>
          <tr>
            <td><strong>실측 벤치마크 미연동</strong></td>
            <td>3DMark / PassMark GPU 실측값이 아닌 모델명 파싱 추정치입니다.</td>
            <td><span class="badge b-yellow">중간</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="box box-blue">
      <div class="box-title">💡 종합 신뢰도 평가</div>
      GPU 점수 반영 후 <strong>특히 디자이너·개발자와 같은 그래픽 집약적 직무의 적정성 판별 정확도가 대폭 향상</strong>되었습니다.
      다만 노트북 TDP, SSD 유형 등 추가 변수를 향후 보완하면 신뢰도를 더 끌어올릴 수 있습니다.
      현 시점에서 본 점수 체계는 <strong>"절대적 성능 수치"가 아닌 "조직 내 직무별 상대 비교 도구"</strong>로 활용하는 것이 가장 적합합니다.
    </div>
  </section>
  <!-- 9. 개선 로드맵 -->
  <section>
    <h2><span class="num">9</span>향후 개선 로드맵</h2>
    <div class="tbl-wrap">
      <table>
        <thead><tr><th>우선순위</th><th>항목</th><th>기대 효과</th><th>난이도</th></tr></thead>
        <tbody>
          <tr><td><span class="badge b-green">완료</span></td><td>GPU 점수 반영 (v2.0)</td><td>그래픽 직무 신뢰도 대폭 향상</td><td>중</td></tr>
          <tr><td><span class="badge b-yellow">권장</span></td><td>SSD 유형별 점수 추가 (NVMe/SATA/HDD)</td><td>실체감 체감 속도 반영</td><td>하</td></tr>
          <tr><td><span class="badge b-yellow">권장</span></td><td>노트북/데스크탑 TDP 보정</td><td>모바일 CPU 과대평가 방지</td><td>중</td></tr>
          <tr><td><span class="badge b-primary">선택</span></td><td>PassMark / 3DMark 실측 DB 내장 연동</td><td>추정치 → 실측값 전환</td><td>상</td></tr>
          <tr><td><span class="badge b-primary">선택</span></td><td>직무별 항목 가중치 커스터마이징</td><td>조직 특성 맞춤 정밀 점수화</td><td>중</td></tr>
          <tr><td><span class="badge b-primary">선택</span></td><td>RMM 에이전트 실시간 자원 점유율 연동</td><td>실사용 기반 교체 우선순위 추천</td><td>상</td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <footer>
    <p>HM ITAM — PC 사양 적정성 분석 기획서 v2.0 (GPU 반영) &nbsp;·&nbsp; 2026. 05. 28</p>
    <p style="margin-top:0.25rem;">내부 검토용 문서입니다. 무단 외부 배포를 금합니다.</p>
  </footer>
 </div>
 </body>
 </html>
--- a/README.md
+++ b/README.md
@@ -9,6 +9,17 @@
    - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
    - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
 4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
 5. **DB 삭제 및 초기화 절대 엄금 (Strict DB Deletion Policy)**:
    - 어떠한 경우에도 `DELETE`, `DROP`, `TRUNCATE` 등 데이터를 삭제하거나 테이블을 초기화하는 작업은 사전에 사용자에게 상세 사유를 보고하고 **명시적 승인**을 얻은 후에만 시행한다.
    - 기존 데이터의 가치를 최우선으로 하며, 작업 전 백업 여부를 반드시 확인한다.
 6. **RED–GREEN–Refactor 개발 원칙**:
    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
 ---
--- a/SampleData_PC.xlsx
+++ b/SampleData_PC.xlsx
--- a/SampleData_SVR.xlsx
+++ b/SampleData_SVR.xlsx
--- a/analyze_remote_mess.cjs
+++ b/analyze_remote_mess.cjs
@@ -1,29 +0,0 @@
 const mysql = require('mysql2/promise');
 require('dotenv').config({ override: true });
 (async () => {
  const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME,
    port: parseInt(process.env.DB_PORT || '3306')
  });
  try {
    // 1. PW 필드에 9~10자리 숫자(팀뷰어 ID 의심)가 있는 경우
    const [rows1] = await pool.query("SELECT id, asset_id, net_name, net_value1, net_value2 FROM asset_remote WHERE net_value2 REGEXP '^[0-9]{9,10}$'");
    console.log('--- Suspicious PW as ID ---');
    console.log(JSON.stringify(rows1, null, 2));
    // 2. REMOTE 타입인데 value1이 IP인 경우 (아까 확인한 거 포함)
    const [rows2] = await pool.query("SELECT id, asset_id, net_name, net_value1, net_value2 FROM asset_remote WHERE net_type = 'REMOTE' AND net_value1 REGEXP '^[0-9]+\\\\.[0-9]+\\\\.[0-9]+\\\\.[0-9]+$'");
    console.log('\n--- REMOTE with IP in val1 ---');
    console.log(JSON.stringify(rows2, null, 2));
  } catch (err) {
    console.error(err);
  } finally {
    await pool.end();
  }
 })();
--- a/backupDB_20260602.xlsx
+++ b/backupDB_20260602.xlsx
--- a/backup_db.js
+++ b/backup_db.js
@@ -1,59 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 import * as xlsx from 'xlsx';
 import fs from 'fs';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function backup() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  console.log('🚀 Starting Database Backup Process...');
  const tables = [
    'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 
    'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
  ];
  const wb = xlsx.utils.book_new();
  for (const table of tables) {
    try {
      // 1. Create table backup
      await connection.query(`DROP TABLE IF EXISTS ${table}_backup`);
      await connection.query(`CREATE TABLE ${table}_backup AS SELECT * FROM ${table}`);
      console.log(`✅ Table backup created: ${table} -> ${table}_backup`);
      // 2. Fetch data for Excel
      const [rows] = await connection.query(`SELECT * FROM ${table}`);
      if (rows.length > 0) {
          const ws = xlsx.utils.json_to_sheet(rows);
          // Sheet names max length is 31 chars
          const sheetName = table.substring(0, 31);
          xlsx.utils.book_append_sheet(wb, ws, sheetName);
      }
    } catch (e) {
      console.warn(`⚠️ Skipped ${table}: ${e.message}`);
    }
  }
  // 3. Write Excel file
  const fileName = 'backupDB_20260608.xlsx';
  xlsx.writeFile(wb, fileName);
  console.log(`✅ Excel data exported successfully to ${fileName}`);
  await connection.end();
 }
 backup().catch(err => {
  console.error('❌ Backup Failed:', err);
  process.exit(1);
 });
--- a/check_logs.js
+++ b/check_logs.js
@@ -1,28 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function checkRecentLogs() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  console.log('--- Recent History Logs ---');
  const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5');
  console.log(JSON.stringify(rows, null, 2));
  console.log('\n--- Recent Core Data (to check current_dept) ---');
  const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5');
  console.log(JSON.stringify(coreRows, null, 2));
  await connection.end();
 }
 checkRecentLogs().catch(console.error);
--- a/check_network.js
+++ b/check_network.js
@@ -1,29 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function checkRemote() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  console.log('--- Checking asset_remote table ---');
  const [columns] = await connection.query('DESCRIBE asset_remote');
  const cols = columns.map(c => c.Field);
  console.log('Columns in asset_remote:', cols.join(', '));
  const [count] = await connection.query('SELECT COUNT(*) as count FROM asset_remote WHERE remote_tool IS NOT NULL OR remote_id IS NOT NULL');
  console.log(`Rows with remote info (tool or id): ${count[0].count}`);
  await connection.end();
 }
 checkRemote().catch(console.error);
--- a/check_remote_data.cjs
+++ b/check_remote_data.cjs
@@ -1,24 +0,0 @@
 const mysql = require('mysql2/promise');
 require('dotenv').config({ override: true });
 (async () => {
  const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME,
    port: parseInt(process.env.DB_PORT || '3306')
  });
  try {
    const [rows] = await pool.query(
      'SELECT net_name, net_value1, net_value2 FROM asset_remote WHERE net_type = ?',
      ['REMOTE']
    );
    console.log(JSON.stringify(rows, null, 2));
  } catch (err) {
    console.error(err);
  } finally {
    await pool.end();
  }
 })();
--- a/check_remote_specific.cjs
+++ b/check_remote_specific.cjs
@@ -1,24 +0,0 @@
 const mysql = require('mysql2/promise');
 require('dotenv').config({ override: true });
 (async () => {
  const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME,
    port: parseInt(process.env.DB_PORT || '3306')
  });
  try {
    const [rows] = await pool.query(
      'SELECT net_name, net_value1, net_value2 FROM asset_remote WHERE net_name LIKE ? OR net_name LIKE ? OR net_name LIKE ? OR net_name LIKE ?',
      ['%팀뷰어%', '%애니데스크%', '%TeamViewer%', '%AnyDesk%']
    );
    console.log(JSON.stringify(rows, null, 2));
  } catch (err) {
    console.error(err);
  } finally {
    await pool.end();
  }
 })();
--- a/check_remote_tangled.cjs
+++ b/check_remote_tangled.cjs
@@ -1,27 +0,0 @@
 const mysql = require('mysql2/promise');
 require('dotenv').config({ override: true });
 (async () => {
  const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME,
    port: parseInt(process.env.DB_PORT || '3306')
  });
  try {
    // Find assets where REMOTE net_value1 looks like an IP and matches an existing IP row
    const [rows] = await pool.query(`
      SELECT r1.asset_id, r1.net_name as remote_name, r1.net_value1 as remote_val1, r2.net_value1 as ip_val1
      FROM asset_remote r1
      JOIN asset_remote r2 ON r1.asset_id = r2.asset_id AND r2.net_type = 'IP'
      WHERE r1.net_type = 'REMOTE' AND r1.net_value1 REGEXP '^[0-9]+\\\\.[0-9]+\\\\.[0-9]+\\\\.[0-9]+$'
    `);
    console.log(JSON.stringify(rows, null, 2));
  } catch (err) {
    console.error(err);
  } finally {
    await pool.end();
  }
 })();
--- a/db_init.js
+++ b/db_init.js
@@ -1,176 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function initDB() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306'),
    multipleStatements: true
  });
  console.log('🔄 DB 초기화 시작 (영문 표준 스키마 적용)...');
  const tablesToDrop = [
    'pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets', 
    'sw_sub_assets', 'sw_perm_assets', 'cloud_assets', 'sw_users', 'asset_logs'
  ];
  for (const table of tablesToDrop) {
    await connection.query(`DROP TABLE IF EXISTS ${table}`);
  }
  const createHardwareTable = (tableName, comment) => `
    CREATE TABLE ${tableName} (
      id VARCHAR(50) PRIMARY KEY,
      corp VARCHAR(100),
      asset_code VARCHAR(100),
      purchase_date VARCHAR(50),
      type VARCHAR(50),
      detail_purpose VARCHAR(50),
      purpose VARCHAR(255),
      details TEXT,
      current_org VARCHAR(255),
      prev_org VARCHAR(255),
      location VARCHAR(255),
      manager_main VARCHAR(100),
      manager_sub VARCHAR(100),
      ip_address VARCHAR(100),
      remote_tool VARCHAR(100),
      server_id VARCHAR(100),
      server_pw VARCHAR(100),
      model_name VARCHAR(255),
      mainboard VARCHAR(255) COMMENT '메인보드',
      os VARCHAR(100),
      cpu VARCHAR(255),
      ram VARCHAR(100),
      gpu VARCHAR(100),
      storage1 VARCHAR(255),
      storage2 VARCHAR(255),
      storage3 VARCHAR(255),
      monitoring VARCHAR(100),
      price VARCHAR(100),
      remarks TEXT,
      storage_location VARCHAR(255),
      status VARCHAR(50),
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `;
  await connection.query(createHardwareTable('pc_assets', 'PC'));
  await connection.query(createHardwareTable('server_assets', 'Server'));
  await connection.query(createHardwareTable('storage_assets', 'Storage'));
  await connection.query(createHardwareTable('equip_assets', 'Equipment'));
  await connection.query(createHardwareTable('mobile_assets', 'Mobile'));
  await connection.query(`
    CREATE TABLE sw_sub_assets (
      id VARCHAR(50) PRIMARY KEY,
      corp VARCHAR(100) COMMENT '구매법인',
      category VARCHAR(100) COMMENT '분야',
      dept VARCHAR(100) COMMENT '부서',
      product_name VARCHAR(255) COMMENT '제품명',
      license_type VARCHAR(100) COMMENT '라이선스 유형',
      quantity INT COMMENT '수량',
      price VARCHAR(100) COMMENT '금액',
      purchase_date VARCHAR(50) COMMENT '구매일',
      start_date VARCHAR(50) COMMENT '시작일',
      expiry_date VARCHAR(50) COMMENT '만료일',
      vendor VARCHAR(255) COMMENT '구매업체',
      remarks TEXT COMMENT '비고',
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `);
  await connection.query(`
    CREATE TABLE sw_perm_assets (
      id VARCHAR(50) PRIMARY KEY,
      corp VARCHAR(100) COMMENT '구매법인',
      category VARCHAR(100) COMMENT '분야',
      dept VARCHAR(100) COMMENT '부서',
      product_name VARCHAR(255) COMMENT '제품명',
      license_key VARCHAR(255) COMMENT '라이선스 키',
      quantity INT COMMENT '수량',
      price VARCHAR(100) COMMENT '금액',
      purchase_date VARCHAR(50) COMMENT '구매일',
      start_date VARCHAR(50) COMMENT '시작일',
      expiry_date VARCHAR(50) COMMENT '만료일',
      vendor VARCHAR(255) COMMENT '구매업체',
      remarks TEXT COMMENT '비고',
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `);
  await connection.query(`
    CREATE TABLE cloud_assets (
      id VARCHAR(50) PRIMARY KEY,
      platform_name VARCHAR(100),
      corp VARCHAR(100),
      dept VARCHAR(100),
      product_name VARCHAR(255),
      account_name VARCHAR(255),
      pay_method VARCHAR(100),
      pay_day VARCHAR(50),
      card_num VARCHAR(100),
      monthly_fee VARCHAR(100),
      remarks TEXT,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `);
  await connection.query(`
    CREATE TABLE sw_users (
      id INT AUTO_INCREMENT PRIMARY KEY,
      sw_id VARCHAR(50),
      corp VARCHAR(100),
      dept VARCHAR(100),
      position VARCHAR(50),
      user_name VARCHAR(100),
      usage_period VARCHAR(100),
      doc_name VARCHAR(255),
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `);
  await connection.query(`
    CREATE TABLE asset_logs (
      id INT AUTO_INCREMENT PRIMARY KEY,
      asset_id VARCHAR(50),
      log_date VARCHAR(50),
      log_user VARCHAR(100),
      details TEXT,
      cost DECIMAL(15,2) DEFAULT 0,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `);
  await connection.query(`
    CREATE TABLE ops_domain_assets (
      id VARCHAR(50) PRIMARY KEY,
      type VARCHAR(50) COMMENT '유형',
      corp VARCHAR(100) COMMENT '법인',
      service_name VARCHAR(255) COMMENT '서비스명',
      domain_name VARCHAR(255) COMMENT '관리도메인',
      start_date VARCHAR(50) COMMENT '시작일',
      expiry_date VARCHAR(50) COMMENT '만료일',
      price VARCHAR(100) COMMENT '금액',
      manager_main VARCHAR(100) COMMENT '담당자',
      manager_sub VARCHAR(100) COMMENT '담당자(부)',
      remarks TEXT COMMENT '비고',
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `);
  console.log('✅ 모든 테이블이 영문 표준 스키마로 재생성되었습니다.');
  await connection.end();
 }
 initDB().catch(err => {
  console.error('❌ DB 초기화 실패:', err);
  process.exit(1);
 });
--- a/debug_save.cjs
+++ b/debug_save.cjs
@@ -1,55 +0,0 @@
 const mysql = require('mysql2/promise');
 require('dotenv').config({ override: true });
 (async () => {
  const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME,
    port: parseInt(process.env.DB_PORT || '3306')
  });
  const connection = await pool.getConnection();
  try {
    await connection.beginTransaction();
    const asset = {
      id: 'debug_test_' + Date.now(),
      asset_code: 'SVR-240612-DEBUG',
      category: '서버',
      asset_type: '서버PC'
    };
    console.log('--- Step 1: Insert into asset_core ---');
    const coreFields = ['id', 'asset_code', 'category', 'asset_type'];
    const coreData = {};
    coreFields.forEach(f => { if (asset[f] !== undefined) coreData[f] = asset[f]; });
    const coreKeys = Object.keys(coreData);
    const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')})`;
    const [coreRes] = await connection.query(coreSql, Object.values(coreData));
    console.log('Core Insert Success:', coreRes);
    console.log('\n--- Step 2: Insert into asset_spec ---');
    const specData = {
      asset_id: asset.id,
      hw_status: '운영'
    };
    const specKeys = Object.keys(specData);
    const specSql = `INSERT INTO asset_spec (${specKeys.join(', ')}) VALUES (${specKeys.map(() => '?').join(', ')})`;
    const [specRes] = await connection.query(specSql, Object.values(specData));
    console.log('Spec Insert Success:', specRes);
    await connection.commit();
    console.log('\n✅ Transaction Committed Successfully');
  } catch (err) {
    await connection.rollback();
    console.error('\n❌ Error Caught:', err);
  } finally {
    connection.release();
    await pool.end();
  }
 })();
--- a/docs/plans/ITAM_RMM_Integration_Plan.md
+++ b/docs/plans/ITAM_RMM_Integration_Plan.md
--- a/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
+++ b/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
--- a/docs/plans/PC_사양_개선_기획서.html
+++ b/docs/plans/PC_사양_개선_기획서.html
--- a/docs/plans/PLAN_ASSET_HISTORY.md
+++ b/docs/plans/PLAN_ASSET_HISTORY.md
--- a/docs/plans/PROJECT_GUIDE.md
+++ b/docs/plans/PROJECT_GUIDE.md
--- a/docs/plans/design_rule.md
+++ b/docs/plans/design_rule.md
@@ -9,11 +9,12 @@
 *   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
 *   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
-### 2. 반응형 스케일링 (Fluid Scaling System)
+### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
-*   **Core Principle**: 모든 UI 요소는 `vmin`과 `vw` 단위를 조합한 `clamp()` 함수를 통해 화면 크기에 맞춰 동적으로 변화합니다.
+*   **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
 *   **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
 *   **Typography Scale**:
    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
-    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨
+    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
--- a/docs/plans/implementation_plan.md
+++ b/docs/plans/implementation_plan.md
--- a/docs/plans/implementation_plan2
+++ b/docs/plans/implementation_plan2
--- a/docs/plans/implementation_plan3
+++ b/docs/plans/implementation_plan3
--- a/docs/plans/기능명세서.md
+++ b/docs/plans/기능명세서.md
--- a/drop_legacy.js
+++ b/drop_legacy.js
@@ -1,44 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function dropLegacyTables() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  console.log('🧹 Starting cleanup of obsolete legacy backup tables...');
  const tablesToDrop = [
    'asset_pc', 'asset_pc_backup',
    'asset_server', 'asset_server_backup',
    'asset_storage', 'asset_storage_backup',
    'asset_remote_backup', // IMPORTANT: DO NOT drop asset_remote!
    'asset_equipment', 'asset_equipment_backup',
    'asset_office_supplies', 'asset_office_supplies_backup',
    'asset_survey', 'asset_survey_backup',
    'asset_vip', 'asset_vip_backup',
    'asset_pc_parts'
  ];
  for (const table of tablesToDrop) {
    try {
      await connection.query(`DROP TABLE IF EXISTS ${table}`);
      console.log(`✅ Dropped table: ${table}`);
    } catch (err) {
      console.warn(`⚠️ Failed to drop table ${table}: ${err.message}`);
    }
  }
  console.log('🎉 Cleanup complete. Database is now lean and mean.');
  await connection.end();
 }
 dropLegacyTables().catch(console.error);
--- a/fix_all_dates.cjs
+++ b/fix_all_dates.cjs
@@ -1,63 +0,0 @@
 const mysql = require('mysql2/promise');
 require('dotenv').config({ override: true });
 function formatToYYYYMMDD(val) {
  if (!val) return null;
  const s = String(val).trim().replace(/[^0-9]/g, '');
  if (s.length === 8) {
    // YYYYMMDD
    return `${s.substring(0, 4)}-${s.substring(4, 6)}-${s.substring(6, 8)}`;
  } else if (s.length === 6) {
    // YYMMDD -> Assume 20XX
    const year = parseInt(s.substring(0, 2)) > 50 ? '19' + s.substring(0, 2) : '20' + s.substring(0, 2);
    return `${year}-${s.substring(2, 4)}-${s.substring(4, 6)}`;
  }
  // Try to split by dots or slashes if original had them
  const parts = String(val).trim().split(/[\.\-\/]/);
  if (parts.length === 3) {
    let y = parts[0];
    let m = parts[1].padStart(2, '0');
    let d = parts[2].padStart(2, '0');
    if (y.length === 2) y = '20' + y;
    if (y.length === 4 && m.length <= 2 && d.length <= 2) {
        return `${y}-${m}-${d}`;
    }
  }
  return val; // Return as is if format is unknown
 }
 (async () => {
  const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME,
    port: parseInt(process.env.DB_PORT || '3306')
  });
  const connection = await pool.getConnection();
  try {
    const [rows] = await connection.query('SELECT id, purchase_date FROM asset_core WHERE purchase_date IS NOT NULL AND purchase_date != \'\'');
    console.log(`Found ${rows.length} rows to check.`);
    let updatedCount = 0;
    for (const row of rows) {
      const original = row.purchase_date;
      const formatted = formatToYYYYMMDD(original);
      if (formatted !== original && /^\d{4}-\d{2}-\d{2}$/.test(formatted)) {
        await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [formatted, row.id]);
        updatedCount++;
      }
    }
    console.log(`✅ Successfully updated ${updatedCount} rows to YYYY-MM-DD format.`);
  } catch (err) {
    console.error('❌ Error during date migration:', err);
  } finally {
    connection.release();
    await pool.end();
  }
 })();
--- a/img/image_92.png
+++ b/img/image_92.png
--- a/img/location_photo/IDC/서관202.png
+++ b/img/location_photo/IDC/서관202.png
--- a/index.html
+++ b/index.html
@@ -8,12 +8,6 @@
  <title>한맥가족 자산관리시스템</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
  <link rel="stylesheet" href="/src/styles/common.css" />
  <link rel="stylesheet" href="/src/styles/login.css" />
  <link rel="stylesheet" href="/src/styles/guide.css" />
  <link rel="stylesheet" href="/src/styles/modal.css" />
  <link rel="stylesheet" href="/src/styles/dashboard.css" />
  <link rel="stylesheet" href="/src/styles/table.css" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
 </head>
--- a/label/DevExpress.Data.v14.1.dll
+++ b/label/DevExpress.Data.v14.1.dll
--- a/label/DevExpress.Printing.v14.1.Core.dll
+++ b/label/DevExpress.Printing.v14.1.Core.dll
--- a/label/DevExpress.Utils.v14.1.dll
+++ b/label/DevExpress.Utils.v14.1.dll
--- a/label/DevExpress.XtraEditors.v14.1.dll
+++ b/label/DevExpress.XtraEditors.v14.1.dll
--- a/label/DevExpress.XtraGrid.v14.1.dll
+++ b/label/DevExpress.XtraGrid.v14.1.dll
--- a/label/DevExpress.XtraLayout.v14.1.dll
+++ b/label/DevExpress.XtraLayout.v14.1.dll
--- a/label/DevExpress.XtraPrinting.v14.1.dll
+++ b/label/DevExpress.XtraPrinting.v14.1.dll
--- a/label/LabelPrinter.exe
+++ b/label/LabelPrinter.exe
--- a/label/Newtonsoft.Json.dll
+++ b/label/Newtonsoft.Json.dll
--- a/label/WebQuery.dll
+++ b/label/WebQuery.dll
--- a/label/config.ini
+++ b/label/config.ini
@@ -0,0 +1,4 @@
 [PRINT]
 FONT=8
 LEFT=143
 TOP=40
--- a/label/de/DevExpress.Data.v14.1.resources.dll
+++ b/label/de/DevExpress.Data.v14.1.resources.dll
--- a/label/de/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/de/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/de/DevExpress.Utils.v14.1.resources.dll
+++ b/label/de/DevExpress.Utils.v14.1.resources.dll
--- a/label/de/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/de/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/de/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/de/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/es/DevExpress.Data.v14.1.resources.dll
+++ b/label/es/DevExpress.Data.v14.1.resources.dll
--- a/label/es/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/es/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/es/DevExpress.Utils.v14.1.resources.dll
+++ b/label/es/DevExpress.Utils.v14.1.resources.dll
--- a/label/es/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/es/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/es/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/es/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/ja/DevExpress.Data.v14.1.resources.dll
+++ b/label/ja/DevExpress.Data.v14.1.resources.dll
--- a/label/ja/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/ja/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/ja/DevExpress.Utils.v14.1.resources.dll
+++ b/label/ja/DevExpress.Utils.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/ru/DevExpress.Data.v14.1.resources.dll
+++ b/label/ru/DevExpress.Data.v14.1.resources.dll
--- a/label/ru/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/ru/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/ru/DevExpress.Utils.v14.1.resources.dll
+++ b/label/ru/DevExpress.Utils.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/tmp/file_1.txt
+++ b/label/tmp/file_1.txt
@@ -0,0 +1,7 @@
 자산번호 : 210312
 자산명   : 가을-PC(i5-12400F)
 공급사   : (주)가을디에스
 자산위치 : 지반부
 관리부서 : 전산
 사용자   : 박노석
 취득일자 : 2024-08-05
--- a/label/tmp/file_1.txt
+++ b/label/tmp/file_1.txt
--- a/map_config.json
+++ b/map_config.json
--- a/map_editor.html
+++ b/map_editor.html
@@ -6,7 +6,7 @@
  <title>ITAM Map Coordinate Editor v3.0</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
 </head>
-<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
+<body class="editor-body">
  <!-- Left: File Selector -->
  <div class="file-sidebar" id="file-sidebar">
@@ -22,7 +22,7 @@
  <!-- Right: Control Panel -->
  <div class="sidebar">
-    <h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
+    <h2>Map Editor <small class="editor-version">v3.0</small></h2>
    <div class="current-path" id="current-path">파일을 선택하세요</div>
    <p>
      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
@@ -31,8 +31,8 @@
    <div class="box-list" id="box-list"></div>
    <div class="actions">
-      <button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
+      <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
-      <button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
+      <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
      <div id="save-status"></div>
    </div>
  </div>
--- a/migrate_schema.js
+++ b/migrate_schema.js
@@ -1,197 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function migrateSchema() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  console.log('🚀 Phase 1: Creating Normalized Tables & Migrating Data...');
  try {
    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
    // --- 1. Drop existing new tables if they exist ---
    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
    // --- 2. Create New Schema ---
    await connection.query(`
      CREATE TABLE asset_core (
        id VARCHAR(50) PRIMARY KEY,
        asset_code VARCHAR(100) UNIQUE NOT NULL,
        category VARCHAR(100),
        asset_type VARCHAR(100),
        asset_purpose VARCHAR(255),
        service_type VARCHAR(50),
        purchase_corp VARCHAR(100),
        purchase_date VARCHAR(50),
        purchase_amount VARCHAR(100),
        purchase_vendor VARCHAR(255),
        approval_document VARCHAR(255),
        memo TEXT,
        manager_primary VARCHAR(100),
        manager_secondary VARCHAR(100),
        current_dept VARCHAR(255),
        previous_dept VARCHAR(255),
        user_current VARCHAR(100),
        previous_user VARCHAR(100),
        emp_no VARCHAR(20),
        user_position VARCHAR(50),
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
      CREATE TABLE asset_hardware (
        id INT AUTO_INCREMENT PRIMARY KEY,
        asset_id VARCHAR(50) NOT NULL,
        hw_status VARCHAR(50),
        model_name VARCHAR(255),
        mainboard VARCHAR(255),
        os VARCHAR(100),
        cpu VARCHAR(255),
        ram VARCHAR(100),
        gpu VARCHAR(100),
        storage1 VARCHAR(255),
        storage2 VARCHAR(255),
        storage3 VARCHAR(255),
        monitoring VARCHAR(100),
        price VARCHAR(100),
        volume VARCHAR(100),
        monitor_inch VARCHAR(50),
        serial_num VARCHAR(100),
        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
      CREATE TABLE asset_location (
        id INT AUTO_INCREMENT PRIMARY KEY,
        asset_id VARCHAR(50) NOT NULL,
        location VARCHAR(255),
        location_detail VARCHAR(255),
        location_photo VARCHAR(255),
        loc_x VARCHAR(20),
        loc_y VARCHAR(20),
        is_active BOOLEAN DEFAULT TRUE,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
      CREATE TABLE asset_remote (
        id INT AUTO_INCREMENT PRIMARY KEY,
        asset_id VARCHAR(50) NOT NULL,
        ip_address VARCHAR(100),
        mac_address VARCHAR(100),
        remote_tool VARCHAR(100),
        remote_id VARCHAR(100),
        remote_pw VARCHAR(100),
        is_active BOOLEAN DEFAULT TRUE,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
    console.log('✅ Normalized tables created.');
    // --- 3. Migrate Data from Legacy Tables ---
    const legacyTables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'];
    let totalMigrated = 0;
    for (const table of legacyTables) {
      try {
        const [rows] = await connection.query(`SELECT * FROM ${table}`);
        for (const row of rows) {
          // 3.1 Insert into asset_core
          await connection.query(`
            INSERT IGNORE INTO asset_core (
              id, asset_code, category, asset_type, asset_purpose, service_type, purchase_corp, purchase_date, 
              purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, 
              current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
          `, [
            row.id, row.asset_code, row.category, row.asset_type, row.asset_purpose, row.service_type, 
            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
            row.user_current, row.previous_user, row.emp_no, row.user_position, row.created_at
          ]);
          // 3.2 Insert into asset_hardware (if hardware fields exist)
          if (row.model_name || row.cpu || row.ram || row.hw_status) {
              await connection.query(`
                INSERT INTO asset_hardware (
                  asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, volume, monitor_inch, serial_num
                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
              `, [
                row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
                row.ssd_1 || row.hdd_1, row.ssd_2 || row.hdd_2, row.hdd_3, row.monitoring, row.price, 
                row.volume, row.monitor_inch, row.serial_num
              ]);
          }
          // 3.3 Insert into asset_location (if location fields exist)
          if (row.location || row.location_detail) {
              await connection.query(`
                INSERT INTO asset_location (
                  asset_id, location, location_detail, location_photo, loc_x, loc_y
                ) VALUES (?, ?, ?, ?, ?, ?)
              `, [
                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
              ]);
          }
          // 3.4 Insert into asset_remote (if network fields exist)
          // Handle primary network interface
          if (row.ip_address || row.mac_address || row.remote_tool) {
              await connection.query(`
                INSERT INTO asset_remote (
                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw
                ) VALUES (?, ?, ?, ?, ?, ?)
              `, [
                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
              ]);
          }
          // Handle secondary network interface (e.g., from server table) if it exists
          if (row.ip_address_2 || row.remote_tool_2) {
              await connection.query(`
                INSERT INTO asset_remote (
                  asset_id, ip_address, remote_tool, remote_id, remote_pw
                ) VALUES (?, ?, ?, ?, ?)
              `, [
                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
              ]);
          }
          totalMigrated++;
        }
        console.log(`- Migrated ${rows.length} records from ${table}`);
      } catch (err) {
        console.warn(`- Skipping legacy table ${table}: ${err.message}`);
      }
    }
    console.log(`✅ Phase 1 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
  } catch (err) {
    console.error('❌ Migration Failed:', err);
  } finally {
    await connection.end();
  }
 }
 migrateSchema();
--- a/migrate_v2_final.js
+++ b/migrate_v2_final.js
@@ -1,212 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function migrateV2() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  console.log('🚀 Phase 2: Final Migration to Normalized V2 Schema...');
  try {
    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
    // 1. Create/Enhance Core Tables
    console.log('1. Creating/Enhancing Tables...');
    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
    await connection.query(`
      CREATE TABLE asset_core (
        id VARCHAR(50) PRIMARY KEY,
        asset_code VARCHAR(100) UNIQUE NOT NULL,
        category VARCHAR(100),
        asset_type VARCHAR(100),
        current_role VARCHAR(50) DEFAULT 'Normal' COMMENT 'Normal, Server, Personal, etc.',
        asset_purpose VARCHAR(255),
        service_type VARCHAR(50),
        purchase_corp VARCHAR(100),
        purchase_date VARCHAR(50),
        purchase_amount VARCHAR(100),
        purchase_vendor VARCHAR(255),
        approval_document VARCHAR(255),
        memo TEXT,
        manager_primary VARCHAR(100),
        manager_secondary VARCHAR(100),
        current_dept VARCHAR(255),
        previous_dept VARCHAR(255),
        user_current VARCHAR(100),
        previous_user VARCHAR(100),
        emp_no VARCHAR(20),
        user_position VARCHAR(50),
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
      CREATE TABLE asset_hardware (
        id INT AUTO_INCREMENT PRIMARY KEY,
        asset_id VARCHAR(50) NOT NULL,
        hw_status VARCHAR(50),
        model_name VARCHAR(255),
        mainboard VARCHAR(255),
        os VARCHAR(100),
        cpu VARCHAR(255),
        ram VARCHAR(100),
        gpu VARCHAR(100),
        storage1 VARCHAR(255),
        storage2 VARCHAR(255),
        storage3 VARCHAR(255),
        storage4 VARCHAR(255),
        monitoring VARCHAR(100),
        price VARCHAR(100),
        volume VARCHAR(100),
        monitor_inch VARCHAR(50),
        serial_num VARCHAR(100),
        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
      CREATE TABLE asset_location (
        id INT AUTO_INCREMENT PRIMARY KEY,
        asset_id VARCHAR(50) NOT NULL,
        location VARCHAR(255),
        location_detail VARCHAR(255),
        location_photo VARCHAR(255),
        loc_x VARCHAR(20),
        loc_y VARCHAR(20),
        is_active TINYINT(1) DEFAULT 1,
        deactivated_at DATETIME NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
      CREATE TABLE asset_remote (
        id INT AUTO_INCREMENT PRIMARY KEY,
        asset_id VARCHAR(50) NOT NULL,
        ip_address VARCHAR(100),
        mac_address VARCHAR(100),
        remote_tool VARCHAR(100),
        remote_id VARCHAR(100),
        remote_pw VARCHAR(100),
        is_active TINYINT(1) DEFAULT 1,
        deactivated_at DATETIME NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    console.log('✅ V2 Schema tables created.');
    // 2. Migration Logic
    const legacyTables = [
      { name: 'asset_pc', defaultRole: 'Personal' },
      { name: 'asset_server', defaultRole: 'Server' },
      { name: 'asset_storage', defaultRole: 'Normal' },
      { name: 'asset_equipment', defaultRole: 'Normal' },
      { name: 'asset_office_supplies', defaultRole: 'Normal' },
      { name: 'asset_survey', defaultRole: 'Normal' },
      { name: 'asset_vip', defaultRole: 'Normal' },
      { name: 'asset_pc_parts', defaultRole: 'Normal' }
    ];
    let totalMigrated = 0;
    for (const tableInfo of legacyTables) {
      const table = tableInfo.name;
      try {
        const [rows] = await connection.query(`SELECT * FROM ${table}`);
        console.log(`- Migrating ${rows.length} records from ${table}...`);
        for (const row of rows) {
          // 2.1 Insert into asset_core
          const role = (table === 'asset_pc' && row.asset_type === '서버PC') ? 'Server' : tableInfo.defaultRole;
          await connection.query(`
            INSERT IGNORE INTO asset_core (
              id, asset_code, category, asset_type, current_role, asset_purpose, service_type, purchase_corp, purchase_date, 
              purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, 
              current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
          `, [
            row.id, row.asset_code, row.category, row.asset_type, role, row.asset_purpose, row.service_type, 
            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
            row.user_current || row.current_user, row.previous_user, row.emp_no, row.user_position, row.created_at
          ]);
          // 2.2 Insert into asset_hardware
          await connection.query(`
            INSERT INTO asset_hardware (
              asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, storage4, monitoring, price, volume, monitor_inch, serial_num
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
          `, [
            row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
            row.ssd_1 || row.storage1, row.ssd_2 || row.storage2, row.hdd_1 || row.storage3, row.hdd_2, row.monitoring, row.price, 
            row.volume, row.monitor_inch, row.serial_num
          ]);
          // 2.3 Insert into asset_location
          if (row.location || row.location_detail) {
              await connection.query(`
                INSERT INTO asset_location (
                  asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active
                ) VALUES (?, ?, ?, ?, ?, ?, 1)
              `, [
                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
              ]);
          }
          // 2.4 Insert into asset_remote
          // Primary Network
          if (row.ip_address || row.mac_address || row.remote_tool) {
              await connection.query(`
                INSERT INTO asset_remote (
                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active
                ) VALUES (?, ?, ?, ?, ?, ?, 1)
              `, [
                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
              ]);
          }
          // Secondary Network (for servers)
          if (row.ip_address_2 || row.remote_tool_2) {
              await connection.query(`
                INSERT INTO asset_remote (
                  asset_id, ip_address, remote_tool, remote_id, remote_pw, is_active
                ) VALUES (?, ?, ?, ?, ?, 1)
              `, [
                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
              ]);
          }
          totalMigrated++;
        }
      } catch (err) {
        console.warn(`- Skipping table ${table}: ${err.message}`);
      }
    }
    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
    console.log(`✅ Phase 2 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
  } catch (err) {
    console.error('❌ Migration Failed:', err);
  } finally {
    await connection.end();
  }
 }
 migrateV2();
--- a/migrate_v4_network.js
+++ b/migrate_v4_network.js
@@ -1,73 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME,
  port: parseInt(process.env.DB_PORT || '3306'),
 });
 async function migrate() {
    const conn = await pool.getConnection();
    try {
        console.log('1. Creating asset_remote_v4 table...');
        await conn.query(`
            CREATE TABLE IF NOT EXISTS asset_remote_v4 (
                id INT AUTO_INCREMENT PRIMARY KEY,
                asset_id VARCHAR(50) NOT NULL,
                net_type VARCHAR(20) NOT NULL, /* 'IP' or 'REMOTE' */
                net_name VARCHAR(100), /* e.g., '기본망', 'AnyDesk' */
                net_value1 VARCHAR(100), /* IP or ID */
                net_value2 VARCHAR(100), /* MAC or PW */
                is_active TINYINT(1) DEFAULT 1,
                deactivated_at DATETIME NULL,
                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
            ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
        `);
        console.log('2. Migrating data from asset_remote...');
        const [oldRows] = await conn.query('SELECT * FROM asset_remote WHERE is_active = 1');
        let ipCount = 0;
        let remoteCount = 0;
        for (const row of oldRows) {
            // Migrating IP/MAC
            if (row.ip_address || row.mac_address) {
                await conn.query(
                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
                    [row.asset_id, 'IP', '기본망', row.ip_address, row.mac_address, row.created_at]
                );
                ipCount++;
            }
            // Migrating Remote
            if (row.remote_tool || row.remote_id || row.remote_pw) {
                await conn.query(
                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
                    [row.asset_id, 'REMOTE', row.remote_tool, row.remote_id, row.remote_pw, row.created_at]
                );
                remoteCount++;
            }
        }
        console.log(`Migrated ${ipCount} IP records and ${remoteCount} Remote records.`);
        console.log('3. Renaming tables...');
        await conn.query('DROP TABLE IF EXISTS asset_remote_legacy');
        await conn.query('RENAME TABLE asset_remote TO asset_remote_legacy, asset_remote_v4 TO asset_remote;');
        console.log('✅ Migration V4 (Remote) Complete.');
    } catch (e) {
        console.error('Migration failed:', e);
    } finally {
        conn.release();
        pool.end();
    }
 }
 migrate();
--- a/migrate_v5_rename_remote.js
+++ b/migrate_v5_rename_remote.js
@@ -1,28 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME,
  port: parseInt(process.env.DB_PORT || '3306'),
 });
 async function migrate() {
    const conn = await pool.getConnection();
    try {
        console.log('1. Renaming asset_network to asset_remote...');
        await conn.query('RENAME TABLE asset_network TO asset_remote');
        console.log('✅ Table renamed successfully.');
    } catch (e) {
        console.error('Migration failed:', e);
    } finally {
        conn.release();
        pool.end();
    }
 }
 migrate();
--- a/migrate_v6_parts_master.js
+++ b/migrate_v6_parts_master.js
@@ -1,195 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config({ override: true });
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 // 기존의 감점 계산 로직을 그대로 이용해 등급과 감점점수를 도출하는 헬퍼 함수
 function parseCpu(cpu) {
  if (!cpu) return { tier: '기타', deduction: 30 };
  const cpuUpper = cpu.toUpperCase().trim();
  if (cpuUpper === '-' || cpuUpper === '') return { tier: '기타', deduction: 30 };
  let tier = '기타';
  let deduction = 30;
  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
    tier = 'i9 / Ryzen 9';
    deduction = 0;
  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
    tier = 'i7 / Ryzen 7';
    deduction = 5;
  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
    tier = 'i5 / Ryzen 5';
    deduction = 15;
  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
    tier = 'i3 / Ryzen 3';
    deduction = 25;
  }
  // CPU 세대 감점 계산 (최대 -15점)
  let genDeduction = 0;
  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
  let gen = 0;
  if (intelMatch && intelMatch[1]) {
    const numStr = intelMatch[1];
    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
  }
  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
  let amdGen = 0;
  if (amdMatch && amdMatch[1] && !intelMatch) {
    const numStr = amdMatch[1];
    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
  }
  if (intelMatch) {
    if (gen >= 12) genDeduction = 0;
    else if (gen >= 10) genDeduction = 5;
    else if (gen >= 8) genDeduction = 10;
    else genDeduction = 15;
  } else if (amdMatch) {
    if (amdGen >= 5) genDeduction = 0;
    else if (amdGen >= 3) genDeduction = 5;
    else genDeduction = 10;
  } else {
    genDeduction = 15;
  }
  // 최종 등급 감점 + 세대 감점 합산
  return { tier, deduction: deduction + genDeduction };
 }
 function parseGpu(gpu) {
  if (!gpu) return { tier: 'C', deduction: 25 };
  const gpuUpper = gpu.toUpperCase().trim();
  if (gpuUpper === '-' || gpuUpper === '') return { tier: 'C', deduction: 25 };
  if (
    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
  ) {
    return { tier: 'S', deduction: 0 };
  } else if (
    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
  ) {
    return { tier: 'A', deduction: 5 };
  } else if (
    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
  ) {
    return { tier: 'B', deduction: 15 };
  } else {
    return { tier: 'C', deduction: 25 };
  }
 }
 function parseRam(ram) {
  if (!ram) return { tier: '부족', deduction: 25 };
  const ramUpper = ram.toUpperCase().trim();
  if (ramUpper === '-' || ramUpper === '') return { tier: '부족', deduction: 25 };
  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
  if (ramMatch && ramMatch[1]) {
    const ramVal = parseInt(ramMatch[1], 10);
    if (ramVal >= 32) return { tier: '최적', deduction: 0 };
    else if (ramVal >= 16) return { tier: '보통', deduction: 10 };
    else if (ramVal >= 8) return { tier: '주의', deduction: 20 };
  }
  return { tier: '부족', deduction: 25 };
 }
 async function runMigration() {
  console.log('🔄 DB 커넥션 연결 중...');
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  try {
    console.log('⚙️ 1. hardware_components_master 테이블 생성...');
    await connection.query('DROP TABLE IF EXISTS hardware_components_master');
    await connection.query(`
      CREATE TABLE hardware_components_master (
        id INT AUTO_INCREMENT PRIMARY KEY,
        category VARCHAR(50) NOT NULL COMMENT 'CPU, GPU, RAM 등',
        component_name VARCHAR(255) NOT NULL UNIQUE COMMENT '부품 표준 명칭',
        score_tier VARCHAR(50) COMMENT '성능 등급',
        deduction INT DEFAULT 0 COMMENT '감점 점수',
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    console.log('✅ 테이블 생성 완료.');
    console.log('🔍 2. 기존 asset_spec 테이블에서 부품명 조회...');
    const [specRows] = await connection.query('SELECT DISTINCT cpu, ram, gpu FROM asset_spec');
    const uniqueCpus = new Set();
    const uniqueGpus = new Set();
    const uniqueRams = new Set();
    specRows.forEach(row => {
      if (row.cpu && row.cpu.trim() !== '-' && row.cpu.trim() !== '') uniqueCpus.add(row.cpu.trim());
      if (row.gpu && row.gpu.trim() !== '-' && row.gpu.trim() !== '') uniqueGpus.add(row.gpu.trim());
      if (row.ram && row.ram.trim() !== '-' && row.ram.trim() !== '') uniqueRams.add(row.ram.trim());
    });
    // 만약 데이터가 너무 비어있을 경우를 대비하여 기본 대표 부품 몇 개 추가
    if (uniqueCpus.size === 0) {
      ['Intel Core i9-13900K', 'Intel Core i7-14700K', 'Intel Core i5-12400', 'AMD Ryzen 7 7800X3D', 'Intel Core i3-10100'].forEach(c => uniqueCpus.add(c));
    }
    if (uniqueGpus.size === 0) {
      ['NVIDIA GeForce RTX 4090', 'NVIDIA GeForce RTX 4070', 'NVIDIA GeForce RTX 3060', 'Intel Iris Xe Graphics', 'NVIDIA GeForce GTX 1660 Super'].forEach(g => uniqueGpus.add(g));
    }
    if (uniqueRams.size === 0) {
      ['8GB', '16GB', '32GB', '64GB'].forEach(r => uniqueRams.add(r));
    }
    console.log(`   - 추출된 CPU 개수: ${uniqueCpus.size}`);
    console.log(`   - 추출된 GPU 개수: ${uniqueGpus.size}`);
    console.log(`   - 추출된 RAM 개수: ${uniqueRams.size}`);
    console.log('💾 3. 마스터 테이블에 부품 데이터 및 감점 정보 삽입...');
    // CPU 삽입
    for (const cpu of uniqueCpus) {
      const { tier, deduction } = parseCpu(cpu);
      await connection.query(
        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
        ['CPU', cpu, tier, deduction]
      );
    }
    // GPU 삽입
    for (const gpu of uniqueGpus) {
      const { tier, deduction } = parseGpu(gpu);
      await connection.query(
        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
        ['GPU', gpu, tier, deduction]
      );
    }
    // RAM 삽입
    for (const ram of uniqueRams) {
      const { tier, deduction } = parseRam(ram);
      await connection.query(
        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
        ['RAM', ram, tier, deduction]
      );
    }
    console.log('✅ 마이그레이션이 성공적으로 완료되었습니다!');
  } catch (error) {
    console.error('❌ 마이그레이션 오류 발생:', error);
  } finally {
    await connection.end();
  }
 }
 runMigration();
--- a/probe_db.js
+++ b/probe_db.js
@@ -1,36 +0,0 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config();
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 async function probeDB() {
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  console.log('--- Database Probe Start ---');
  const [tables] = await connection.query('SHOW TABLES');
  const tableNames = tables.map(t => Object.values(t)[0]);
  console.log('Existing Tables:', tableNames);
  for (const table of tableNames) {
    const [columns] = await connection.query(`DESCRIBE ${table}`);
    console.log(`\n[Table: ${table}]`);
    columns.forEach(c => {
      console.log(`  - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`);
    });
  }
  await connection.end();
  console.log('\n--- Database Probe End ---');
 }
 probeDB().catch(console.error);
--- a/public/img/image_92.png
+++ b/public/img/image_92.png
--- a/public/img/location_photo/IDC/동관53.png
+++ b/public/img/location_photo/IDC/동관53.png
--- a/public/img/location_photo/IDC/동관54.png
+++ b/public/img/location_photo/IDC/동관54.png
--- a/public/img/location_photo/IDC/서관202.png
+++ b/public/img/location_photo/IDC/서관202.png
--- a/public/img/location_photo/IDC/서관203.png
+++ b/public/img/location_photo/IDC/서관203.png
--- a/public/img/location_photo/IDC/서관204.png
+++ b/public/img/location_photo/IDC/서관204.png
--- a/public/img/location_photo/IDC/서관205.png
+++ b/public/img/location_photo/IDC/서관205.png
--- a/public/img/location_photo/기술개발센터/서버실/서버실_1.png
+++ b/public/img/location_photo/기술개발센터/서버실/서버실_1.png
--- a/public/img/location_photo/기술개발센터/서버실/서버실_2.png
+++ b/public/img/location_photo/기술개발센터/서버실/서버실_2.png
--- a/public/img/location_photo/기술개발센터/센터내부/센터내부.png
+++ b/public/img/location_photo/기술개발센터/센터내부/센터내부.png
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_data.json
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_data.json
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload.js
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_6f.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_6f.js
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_7f.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_7f.js
--- a/public/img/location_photo/한맥빌딩/1층.png
+++ b/public/img/location_photo/한맥빌딩/1층.png
--- a/public/img/location_photo/한맥빌딩/2층.png
+++ b/public/img/location_photo/한맥빌딩/2층.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
이태훈	9f165faf13	feat: add desktop label printer program files and clean up backup files	2026-06-23 14:07:22 +09:00
이태훈	237ac9ee25	fix: 위치보기 수정 (도면 오버플로우 제한 및 API 호출 경로 정상화)	2026-06-22 13:56:52 +09:00
Taehoon	f41f2378d7	fix: 자산번호 저장 누락 오류 수정 및 위치보기 도면 배치 보완	2026-06-19 16:25:28 +09:00
Taehoon	41406f56e8	Merge branch 'ux_setting' into db_setting # Conflicts: # README.md	2026-06-19 15:48:26 +09:00
Taehoon	af578a63bc	refactor: 프로젝트 정리 및 최적화 (미사용 파일 제거, 코드 중복 제거, 정적 이미지 빌드 경로 수정) - 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거 - excelHandler.ts 내 미사용 대용량 엑셀 처리 함수들을 삭제하여 xlsx 의존성 제거 및 클라이언트 빌드 크기 최적화 - ListFactory.ts와 utils.ts 간에 중복으로 존재하던 calculatePcScoreDeductive 함수를 하나로 일원화 - 기획서 및 계획 문서들을 docs/plans/ 하위 폴더로 이동하여 프로젝트 루트 정리 - 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결	2026-06-19 15:12:25 +09:00
Taehoon	e8bc42e5de	refactor: CSS 파일 모듈화 및 컴포넌트별 직접 Import 구조 전환 (방안 B) - HTML 내 CSS link 태그들을 삭제하고, 각 TS 진입점 파일에서 CSS 파일을 직접 import하도록 연동 - 스타일 파일들을 각 컴포넌트/뷰 디렉토리 옆으로 이동 배치 (Co-location) - guide.css, modal.css, dashboard.css, table.css, map-editor.css 이동 및 경로 갱신 - 디자인 시스템(common.css) 및 로그인 스타일(login.css)은 전역 배치 유지하고 main.ts에서 통합 임포트	2026-06-19 15:04:36 +09:00
Taehoon	587e92a7da	feat: 서버 탭 전환 시 뷰 모드 유지 및 대시보드/맵 에디터 스타일 표준화 - 서버 탭 복귀 시 최근 선택한 뷰 모드(목록/위치) 상태 유지 및 currentViewMode 상태 일원화 - 개인PC 대시보드 및 맵 에디터의 인라인 CSS 스타일을 공통 CSS 및 변수 클래스로 분리 및 가독성 개선 - Vite 멀티페이지 빌드 설정(vite.config.ts) 추가	2026-06-19 14:55:25 +09:00
Taehoon	c6515c1b5d	merge: 공동작업자 HW_Dashboard 브랜치 병합 (대시보드 UI 및 가독성 개선 사항 병합)	2026-06-19 13:39:29 +09:00
Taehoon	e128634e05	style: UI 가독성 개선 및 LocationView 타입 오류 수정 1. common.css의 --mute 변수 색상 대비값 강화 (#71717a) 및 누락된 자산 상태/성능 등급 배지 CSS 클래스 정의 2. ListFactory.ts에서 테이블 헤더(th) 정렬을 데이터 셀(td)과 일치시키고 장문 생략 시 툴팁(title) 추가 3. common.css에서 타이포그래피 스케일 계산식을 clamp에서 max로 변경하여 상한선 제한 해제 (와이드 화면 대응) 4. LocationView.ts 내 HardwareAsset 타입에 정의되지 않은 asset_purpose를 any로 타입 캐스팅하여 TS2339 빌드 에러 해결 5. 프로젝트 폴더 내 일회성 점검/이관 스크립트 및 Playwright 임시 캡처 로그/이미지 파일 정리	2026-06-19 13:19:25 +09:00
Taehoon	c0ef52deac	style(table): optimize for 1920x1080 without horizontal scroll - Switched to fixed table layout to ensure fit within viewport - Implemented automatic ellipsis (...) for overflowing text in all cells - Synchronized cell widths and alignment in ListFactory with column definitions - Removed restrictive min-widths that caused horizontal scrolling	2026-06-18 20:41:03 +09:00
Taehoon	aab1f91d3d	feat(map): implement robust ID-based asset mapping and fix UI rendering inconsistencies - Migrated map mapping from fuzzy coordinates to precise asset_id tracking - Updated MapEditor to allow explicit asset assignment via dropdown - Fixed LocationView rendering logic to search across all hardware categories - Standardized map indicators to always render as areas (boxes) with minimum size - Restored stable CSS max-height for detail modal photos to prevent clipping - Synced MapEditor saves directly to database via asset_id	2026-06-18 19:49:15 +09:00
JooWangi	f656f0a439	fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조) - HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회 - ListFactory: 동일하게 세부 직무명 우선 참조 - 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시 - 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영) - 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨	2026-06-18 19:48:23 +09:00
Taehoon	e77c4854cb	fix: restore exact matching logic for map locations	2026-06-18 17:04:25 +09:00
JooWangi	1d32a0350b	feat: 등급별 자산 종합 현황 및 사양 적정성 분석 레이아웃 5:5 콤팩트 최적화	2026-06-18 15:56:51 +09:00
Taehoon	309c400ee2	최신코드 반영	2026-06-18 13:00:18 +09:00
Taehoon	3db05f2939	feat(ui/ux): unify typography to Pretendard and enforce read-only view mode as default - Set global font-family to Pretendard and letter-spacing to -0.02em. - Standardized table header font-size to var(--fs-sm). - Fixed table clipping and sticky header behavior at 1920x1080. - Implemented dynamic select options in search filters. - Enforced 'view' mode as default for all asset modals (PC, Server, SW, etc.). - Improved Modal logic to ensure all fields (including dynamic rows) are correctly locked. - Updated Location View detail button from 'Edit' to 'View'. - Updated design_rule.md to reflect new typography standards.	2026-06-18 11:13:16 +09:00
Taehoon	2cb4b87c0a	style: surgically unify Admin page UI and sub-tabs - Standardized sub-tab rendering in PartsMasterListView to prevent duplication - Updated badge classes to match system design guide (badge-success/warning) - Refactored JobSpecModal to use unified .grid-form and header identity - Preserved all functional logic and tab-switching behavior from collaborator	2026-06-17 13:16:15 +09:00
JooWangi	abc531a41e	Design: 대시보드 하단 표 세로비율 확장 및 스크롤바 제거	2026-06-17 09:28:06 +09:00
JooWangi	8451101325	Style: 대시보드 UI 프리미엄 리스타일링 및 카드 구조 도입	2026-06-17 09:25:16 +09:00
JooWangi	3e69e74bc9	Feat: 통합 사양 적정성 인라인 바 그래프 및 대시보드 레이아웃 개편	2026-06-17 09:22:31 +09:00
Taehoon	b9d28736e2	docs: add work log for 2026-06-15 and update DB deletion policy in README	2026-06-15 11:47:46 +09:00