<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>오라인포 — 퍼블리싱 작업 목록</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0a0b0e;
      --bg-card: #111318;
      --bg-card-hover: #181c24;
      --border: rgba(255,255,255,0.07);
      --border-hover: rgba(99,179,237,0.35);
      --accent: #3B82F6;
      --accent-soft: rgba(59,130,246,0.12);
      --accent-2: #06B6D4;
      --text-1: #F1F5F9;
      --text-2: #94A3B8;
      --text-3: #475569;
      --mono: 'JetBrains Mono', monospace;
      --sans: 'Outfit', sans-serif;
      --radius: 14px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { font-size: 62.5%; scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text-1);
      font-size: 1.6rem;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── NOISE OVERLAY ── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      opacity: 0.4;
    }

    /* ── GLOW ── */
    .glow {
      position: fixed; pointer-events: none; z-index: 0;
      border-radius: 50%; filter: blur(120px); opacity: 0.12;
    }
    .glow-1 { width: 600px; height: 600px; background: var(--accent); top: -200px; left: -100px; }
    .glow-2 { width: 400px; height: 400px; background: var(--accent-2); bottom: 0; right: 0; }

    /* ── LAYOUT ── */
    .wrap {
      position: relative; z-index: 1;
      max-width: 1080px;
      margin: 0 auto;
      padding: 60px 24px 120px;
    }

    /* ── TOP BADGE ── */
    .project-badge {
      display: inline-block;
      padding: 6px 14px;
      background: var(--accent-soft);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: 100px;
      font-size: 1.2rem; font-weight: 600;
      color: var(--accent);
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-bottom: 24px;
      animation: fadeUp 0.6s ease both;
    }

    /* ── PAGE TITLE ── */
    .page-title {
      font-size: clamp(3.2rem, 5vw, 5.6rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin-bottom: 12px;
      animation: fadeUp 0.6s 0.08s ease both;
    }
    .page-title span { color: var(--accent); }

    .page-sub {
      font-size: 1.7rem;
      color: var(--text-2);
      font-weight: 400;
      margin-bottom: 48px;
      animation: fadeUp 0.6s 0.14s ease both;
    }

    /* ── NOTICE CARD ── */
    .notice-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 32px;
      margin-bottom: 56px;
      animation: fadeUp 0.6s 0.2s ease both;
      position: relative; overflow: hidden;
    }
    .notice-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(to bottom, var(--accent), var(--accent-2));
    }
    .notice-card-head { margin-bottom: 18px; }
    .notice-card-head strong {
      font-size: 1.4rem; font-weight: 700;
      color: var(--text-2);
      letter-spacing: 0.12em; text-transform: uppercase;
    }
    .notice-list { list-style: none; }
    .notice-item {
      position: relative;
      padding: 5px 0 5px 16px;
      font-size: 1.5rem; color: var(--text-2); line-height: 1.6;
    }
    .notice-item::before {
      content: '';
      position: absolute; left: 0; top: 13px;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent);
    }
    .notice-item strong { color: var(--text-1); font-weight: 600; }
    .notice-item code {
      font-family: var(--mono);
      font-size: 1.3rem;
      background: rgba(255,255,255,0.06);
      padding: 1px 6px;
      border-radius: 4px;
    }

    /* ── SECTION ── */
    .section {
      margin-bottom: 48px;
      animation: fadeUp 0.5s ease both;
    }
    .section:last-of-type { margin-bottom: 0; }
    .section:nth-of-type(1) { animation-delay: 0.28s; }
    .section:nth-of-type(2) { animation-delay: 0.34s; }
    .section:nth-of-type(3) { animation-delay: 0.40s; }
    .section:nth-of-type(4) { animation-delay: 0.46s; }
    .section:nth-of-type(5) { animation-delay: 0.52s; }

    .section-header {
      overflow: hidden;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
    }
    .section-count {
      float: right;
      font-size: 1.2rem; font-weight: 500;
      color: var(--text-3);
      line-height: 2.8rem;
    }
    .section-num {
      font-family: var(--mono);
      font-size: 1.1rem; font-weight: 500;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid rgba(59,130,246,0.2);
      border-radius: 6px;
      padding: 3px 8px;
      letter-spacing: 0.05em;
      margin-right: 10px;
    }
    .section-title {
      font-size: 2rem; font-weight: 700;
      color: var(--text-1); letter-spacing: -0.02em;
    }

    /* ── FILE LIST ── */
    .file-list { list-style: none; }

    .file-row {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 6px;
      overflow: hidden;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .file-row:last-child { margin-bottom: 0; }
    .file-row:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-hover);
      transform: translateX(3px);
    }

    /* float 기반 레이아웃 */
    .file-row-inner {
      padding: 14px 18px;
      overflow: hidden; /* clearfix */
    }

    .file-action { float: right; padding-top: 2px; }

    .file-label {
      font-size: 1.45rem; font-weight: 600;
      color: var(--text-1);
      margin-bottom: 3px;
    }
    .file-name {
      font-family: var(--mono);
      font-size: 1.25rem; font-weight: 400;
      color: var(--text-3);
    }

    /* Link button — inline-block 기반 */
    .btn-link {
      display: inline-block;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 1.25rem; font-weight: 600;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid rgba(59,130,246,0.2);
      text-decoration: none !important;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .btn-link:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    /* ── FOOTER ── */
    .foot {
      text-align: center;
      font-size: 1.3rem; color: var(--text-3);
      margin-top: 80px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
    }
    .foot .studio { color: var(--text-2); font-weight: 700; letter-spacing: 0.06em; text-transform: lowercase; }
    .foot .sep { margin: 0 10px; color: var(--text-3); }

    /* ── ANIMATION ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      .wrap { padding: 40px 16px 80px; }
      .notice-card { padding: 22px 20px; }
      .file-name { display: none; }
    }
  </style>
</head>
<body>

  <div class="glow glow-1"></div>
  <div class="glow glow-2"></div>

  <div class="wrap">

    <!-- 상단 배지 -->
    <div class="project-badge">Owrainfo · Publishing Index</div>

    <!-- 타이틀 -->
    <h1 class="page-title">퍼블리싱<br><span>작업 목록</span></h1>
    <p class="page-sub">오라인포(Owrainfo) 웹사이트 UI 퍼블리싱 산출물 목록입니다.</p>

    <!-- 공지 카드 -->
    <div class="notice-card">
      <div class="notice-card-head">
        <strong>📋 &nbsp;Publishing Notes</strong>
      </div>
      <ul class="notice-list">
        <li class="notice-item">작업 환경은 <strong>로컬 개발 서버(Live Server)</strong> 기반으로 진행되었으며, 파일 경로는 서버 루트 기준으로 설정되어 있습니다.</li>
        <li class="notice-item">헤더(<code>header.html</code>)와 푸터(<code>footer.html</code>)는 jQuery의 <strong>$.load()</strong>를 통해 공통 모듈로 분리·적용하였습니다. 코드 중복 제거 및 유지보수 편의성을 고려한 구조입니다.</li>
        <li class="notice-item">반응형은 <strong>Breakpoint 기준 1024px / 768px / 480px</strong>으로 구분하여 작업하였습니다.</li>
        <li class="notice-item">메인 비주얼 슬라이더 및 서브 콘텐츠 슬라이더는 <strong>Swiper.js</strong>를 사용하였으며, 스크롤 애니메이션은 <strong>GSAP + ScrollTrigger</strong> 기반으로 구현하였습니다.</li>
        <li class="notice-item">애니메이션은 <strong>AOS(Animate On Scroll)</strong> 라이브러리를 통해 처리하였습니다.</li>
        <li class="notice-item">아이콘은 <strong>Feather Icons</strong> 및 <strong>Google Material Icons Round</strong>를 혼용하였습니다.</li>
      </ul>
    </div>

    <!-- ─────────────────────
         01. 메인
    ───────────────────────── -->
    <div class="section">
      <div class="section-header">
        <span class="section-count">1 file</span>
        <span class="section-num">01</span>
        <span class="section-title">메인</span>
      </div>
      <ul class="file-list">
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action">
              <a href="/" target="_blank" class="btn-link">바로가기 ↗</a>
            </span>
            <div class="file-label">메인 페이지</div>
            <div class="file-name">index.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action">
              <a href="/etc" target="_blank" class="btn-link">바로가기 ↗</a>
            </span>
            <div class="file-label">PG업 등록</div>
            <div class="file-name">etc.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action">
              <a href="/service" target="_blank" class="btn-link">바로가기 ↗</a>
            </span>
            <div class="file-label">선정산 서비스</div>
            <div class="file-name">service.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action">
              <a href="/service" target="_blank" class="btn-link">바로가기 ↗</a>
            </span>
            <div class="file-label">사이트맵</div>
            <div class="file-name">sitemap.html</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- ─────────────────────
         02. 회사소개
    ───────────────────────── -->
    <div class="section">
      <div class="section-header">
        <span class="section-count">5 files</span>
        <span class="section-num">02</span>
        <span class="section-title">회사소개</span>
      </div>
      <ul class="file-list">
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/company/intro" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">회사개요</div>
            <div class="file-name">sub01_01.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/company/business" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">경영이념 / 비전</div>
            <div class="file-name">sub01_02.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/company/history" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">회사 연혁</div>
            <div class="file-name">sub01_03.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/company/chart" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">조직도</div>
            <div class="file-name">sub01_04.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/company/map" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">찾아오는 길</div>
            <div class="file-name">sub01_05.html</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- ─────────────────────
         03. 사업소개
    ───────────────────────── -->
    <div class="section">
      <div class="section-header">
        <span class="section-count">8 files</span>
        <span class="section-num">03</span>
        <span class="section-title">사업소개</span>
      </div>
      <ul class="file-list">
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/intro" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">사업소개</div>
            <div class="file-name">sub02_01.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/pg" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">PG 시스템</div>
            <div class="file-name">sub02_02.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/prepayment" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">선불 시스템</div>
            <div class="file-name">sub02_03.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/payment" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">결제 솔루션</div>
            <div class="file-name">sub02_04.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/sales" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">매출정산 솔루션</div>
            <div class="file-name">sub02_05.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/b2b" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">B2B 구매자금 솔루션</div>
            <div class="file-name">sub02_06.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/delivery" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">배달대행 솔루션</div>
            <div class="file-name">sub02_07.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/business/progress" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">사업진행현황</div>
            <div class="file-name">sub02_08.html</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- ─────────────────────
         04. 인재채용
    ───────────────────────── -->
    <div class="section">
      <div class="section-header">
        <span class="section-count">4 files</span>
        <span class="section-num">04</span>
        <span class="section-title">인재채용</span>
      </div>
      <ul class="file-list">
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/careers/talent" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">인재상</div>
            <div class="file-name">sub03_01.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/careers/benefit" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">복리후생</div>
            <div class="file-name">sub03_02.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/careers/careers" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">채용정보</div>
            <div class="file-name">sub03_03.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/careers/recruitment" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">채용문의</div>
            <div class="file-name">sub03_04.html</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- ─────────────────────
         05. 오라인
    ───────────────────────── -->
    <div class="section">
      <div class="section-header">
        <span class="section-count">3 files</span>
        <span class="section-num">05</span>
        <span class="section-title">오라인</span>
      </div>
      <ul class="file-list">
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/sub05_01" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">회사소식</div>
            <div class="file-name">sub05_01.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/sub05_02" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">제휴문의</div>
            <div class="file-name">sub05_02.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/sub05_03" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">보도자료</div>
            <div class="file-name">sub05_03.html</div>
          </div>
        </li>
        <li class="file-row">
          <div class="file-row-inner">
            <span class="file-action"><a href="/sub05_03" target="_blank" class="btn-link">바로가기 ↗</a></span>
            <div class="file-label">게시판 뷰</div>
            <div class="file-name">board_biew.html</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 푸터 -->
    <div class="foot">
      <span class="studio">studio monde</span>
      <span class="sep">/</span>
      UI Publishing Index
      <span class="sep">/</span>
      For internal use only
    </div>

  </div>
</body>
</html>