@font-face {
      font-family: 'VCR OSD Mono';
      src: url('VCR_OSD_MONO_1.001.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'Mulmaru';
      src: url('Mulmaru.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    * {margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #0a0a14; overflow: hidden; font-family: 'VCR OSD Mono', monospace; }
    canvas { display: block; }

    /* 포트폴리오 패널 */
    #panel {
      position: fixed;
      top: 0; right: -30vw;
      width: 25vw; height: 100vh;
      background: rgba(10, 10, 20, 0.92);
      backdrop-filter: blur(16px);
      border-left: 1px solid rgba(255,255,255,0.08);
      transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 100;
      display: flex;
      flex-direction: column;
      padding: 48px 36px 36px;
      color: #e0e0e0;
    }
    #panel.open { right: 0; }

    #panel-close {
      position: absolute;
      top: 16px; right: 20px;
      background: none; border: none;
      color: #888; font-size: 22px;
      cursor: pointer;
      transition: color 0.2s;
    }
    #panel-close:hover { color: #fff; }

    #panel-category {
      font-size: 12px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #666;
      margin-bottom: 8px;
    }
    #panel-title {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 24px;
    }
    #panel-divider {
      width: 40px; height: 2px;
      margin-bottom: 24px;
      border-radius: 2px;
    }
    #panel-desc {
      font-size: 18px;
      line-height: 1.8;
      color: #999;
      white-space: pre-line;
    }
    #panel-items {
      margin-top: 32px;
      flex: 1;
      overflow-y: auto;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.12) transparent;
    }
    #panel-items::-webkit-scrollbar { width: 1px; }
    #panel-items::-webkit-scrollbar-track { background: transparent; }
    #panel-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
    .panel-item {
      padding: 18px;
      border: 1px solid rgba(236, 236, 236, 0.733);
      border-radius: 8px;
      margin-bottom: 12px;
      background: rgba(255,255,255,0.04);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .panel-item:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.15);
    }
    .panel-item-title { 
      font-size: 18px; 
      font-weight: 600; 
      color: #ddd;
    }
    .panel-item-sub {
      font-size: 16px;
      color: #666;
      margin-top: 4px;
      white-space: pre-line;
    }
    .panel-image-card {
      margin: 16px;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255,255,255,0.02);
    }
    .panel-image {
      width: 100%;
      display: block;
      object-fit: cover;
    }
    .panel-image-label {
      padding: 8px 12px 4px;
      font-size: 18px;
      font-weight: 600;
      color: #ddd;
      margin-top: 8px;
    }
    .panel-image-desc {
      padding: 0 12px 10px;
      font-size: 16px;
      color: #666;
    }

    /* HUD */
    .hud {
      position: fixed;
      pointer-events: none;
      color: rgba(255,255,255,0.45);
      font-family: 'VCR OSD Mono', monospace;
      font-size: 11px;
      letter-spacing: 1px;
      text-shadow: 0 0 6px rgba(100,180,255,0.6);
      z-index: 10;
    }
    #hud-coords {
      bottom: 12px;
      left: 16px;
    }
    #hud-status {
      top: 12px;
      left: 16px;
      color: rgba(100,255,160,0.7);
      text-shadow: 0 0 6px rgba(100,255,160,0.5);
      transition: opacity 0.1s;
    }

    /* 힌트 */
    #hint {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.25);
      font-size: 13px;
      letter-spacing: 1px;
      pointer-events: none;
      transition: opacity 0.5s;
    }

    /* 반응형 */
    @media (max-width: 600px) {
      #panel { width: 100vw; right: -100vw; }
      #panel.open { right: 0; }
    }

    /* 임베드 */
    .panel-embed {
      margin-bottom: 24px;
    }
    .panel-embed iframe {
      display: block;
      border-radius: 4px;
    }
    .sc-credit {
      font-size: 10px; color: #ccc;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
      font-family: Interstate, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Garuda, Verdana, Tahoma, sans-serif;
      font-weight: 100;
    }
    .sc-credit a { color: #ccc; text-decoration: none; }

    /* 타임라인 */
    .timeline {
      position: relative;
      padding-left: 20px;
      border-left: 1px solid rgba(255,255,255,0.1);
    }
    .tl-item {
      position: relative;
      padding: 0 0 28px 16px;
    }
    .tl-dot {
      position: absolute;
      left: -5px; top: 6px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--node-color, #888);
      box-shadow: 0 0 6px var(--node-color, #888);
    }
    .tl-year {
      font-size: 10px;
      letter-spacing: 2px;
      color: #666;
      margin-bottom: 4px;
    }
    .tl-title {
      font-size: 15px;
      font-weight: 700;
      color: #e0e0e0;
      margin-bottom: 3px;
    }
    .tl-org {
      font-size: 11px;
      color: #888;
      margin-bottom: 4px;
      letter-spacing: 1px;
    }
    .tl-desc {
      font-size: 12px;
      color: #666;
      line-height: 1.6;
      margin-bottom: 6px;
    }
    .tl-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .tl-tag {
      font-size: 10px;
      color: #555;
      letter-spacing: 1px;
    }

    /* 서브 패널 */
    #sub-panel {
      position: fixed;
      top: 0; right: -620px;
      width: 572px; height: 100vh;
      background: rgba(8, 8, 18, 0.90);
      backdrop-filter: blur(16px);
      border-left: 1px solid rgba(255,255,255,0.05);
      transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 99;
      display: flex;
      flex-direction: column;
      padding: 48px 36px 36px;
      color: #e0e0e0;
    }
    #sub-panel.open { right: 25vw; }

    #sub-panel-category {
      font-size: 16px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #666;
      margin-bottom: 8px;
    }
    #sub-panel-title {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 24px;
    }
    #sub-panel-divider {
      width: 40px; height: 2px;
      margin-bottom: 24px;
      border-radius: 2px;
    }
    #sub-panel-desc {
      font-size: 18px;
      line-height: 1.8;
      color: #999;
      white-space: pre-line;
    }
    #sub-panel-items {
      margin-top: 32px;
      flex: 1;
      overflow-y: auto;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.12) transparent;
    }
    #sub-panel-items::-webkit-scrollbar { width: 4px; }
    #sub-panel-items::-webkit-scrollbar-track { background: transparent; }
    #sub-panel-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

    @media (max-width: 600px) {
      #sub-panel { width: 100vw; right: -100vw; }
      #sub-panel.open { right: 0; }
    }

    /* 앱 패널 */
    #app-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      z-index: 199;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    #app-overlay.open { opacity: 1; pointer-events: auto; }

    #app-panel {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(0.96);
      width: 50vw;
      height: 75vh;
      background: rgba(8, 8, 18, 0.98);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 4px;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, transform 0.3s;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #app-panel.open {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }

    #app-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      flex-shrink: 0;
    }
    #app-panel-title {
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #3a4060;
    }
    #app-panel-close {
      background: none;
      border: none;
      color: #444;
      font-size: 16px;
      cursor: pointer;
      transition: color 0.2s;
      line-height: 1;
    }
    #app-panel-close:hover { color: #aaa; }

    #app-panel-iframe {
      flex: 1;
      border: none;
      width: 100%;
      min-height: 0;
    }

    /* 어바웃 패널 */
    #about-panel {
      position: fixed;
      top: 0; left: -520px;
      width: 480px; height: 100vh;
      background: rgba(10, 10, 20, 0.95);
      backdrop-filter: blur(16px);
      border-right: 1px solid rgba(255,255,255,0.08);
      transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 100;
      display: flex;
      flex-direction: column;
      padding: 52px 28px 40px;
      color: #e0e0e0;
    }
    #about-panel.open { left: 0; }

    #about-close {
      position: absolute;
      top: 16px; left: 20px;
      background: none; border: none;
      color: #888; font-size: 22px;
      cursor: pointer; transition: color 0.2s;
    }
    #about-close:hover { color: #fff; }

    #about-screen {
      flex: 1;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 4px;
      padding: 20px 18px;
      overflow: hidden;
      font-size: 12.5px;
      line-height: 2.0;
      color: #c8d0e0;
      white-space: pre-wrap;
      font-family: 'VCR OSD Mono', 'Mulmaru', monospace;
      letter-spacing: 0.1em;
    }
    #about-screen .ab-bold  { font-family: 'VCR OSD Mono', 'Mulmaru', monospace; font-weight: 700; }
    #about-screen .ab-dim   { color: rgba(180, 190, 210, 0.22); }
    #about-screen .ab-plain { font-family: 'VCR OSD Mono', 'Mulmaru', monospace; }
    #about-ruler {
      position: absolute;
      visibility: hidden;
      white-space: pre;
      font-family: 'VCR OSD Mono', monospace;
      font-size: 12.5px;
      letter-spacing: 0.1em;
    }