<!DOCTYPE html>
<html lang="ko" data-theme="auto">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <link rel="icon" type="image/png" href="/web/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="/web/favicon.svg" />
  <link rel="shortcut icon" href="/web/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/web/apple-touch-icon.png" />
  <meta name="apple-mobile-web-app-title" content="Flathome" />
  <link rel="manifest" href="/web/site.webmanifest" />
  <meta name="color-scheme" content="light dark">
  <title>Flathome NAS Portal</title>

  <style>
    /* 폰트 */
    @font-face{
      font-family:'Pretendard-Regular';
      src:url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
      font-weight:400;font-style:normal;font-display:swap;
    }

    /* 컬러 토큰 */
    :root{
      --bg:#f6f8fb; --fg:#1a2a3a; --muted:#5b6b7b; --link:#2a6cdf; --link-hover:#114fbe;
      --card:#ffffff; --card-2:#f9fbff; --border:#e4e9f2; --shadow:0 8px 28px rgba(0,0,0,.06);
      --brand:#214a8a; --brand-2:#2e6bdc; --accent:#ffb600;
      --success:#0a8f53; --danger:#c62828; --info:#1769aa;
      --coupon-border:#ff9999; --coupon-bg:#fff2f2;
      --btn:#1f5bd6; --btn-fg:#fff; --btn-hover:#1748ac; --focus:#7aa7ff;
      --radius-xl:18px; --radius:12px;
    }
    @media (prefers-color-scheme:dark){
      :root{
        --bg:#0e141b; --fg:#e7edf4; --muted:#a6b3c2; --link:#8fb4ff; --link-hover:#c5d6ff;
        --card:#121a23; --card-2:#0f1821; --border:#263242; --shadow:0 10px 30px rgba(0,0,0,.4);
        --brand:#9ec2ff; --brand-2:#6ea0ff; --accent:#ffd180;
        --success:#4dd49c; --danger:#ff6b6b; --info:#6bb8ff;
        --coupon-border:#ff7b7b; --coupon-bg:#281b1b;
        --btn:#6ea0ff; --btn-fg:#06101e; --btn-hover:#4b80e6; --focus:#3e7bff;
      }
    }

    /* 기본 */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;background:var(--bg);color:var(--fg);
      font-family:'Pretendard-Regular', system-ui, -apple-system, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, sans-serif;
      line-height:1.6;
      -webkit-text-size-adjust:100%;
    }
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:none;color:var(--link-hover)} /* hover 밑줄 제거 */
    img{max-width:100%;display:block}
    .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden}

    /* 헤더 */
    header.header{
      position:sticky;top:0;z-index:30;
      background:linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
      color:#fff; box-shadow:var(--shadow);
      padding:18px 16px;
      padding-top:calc(18px + env(safe-area-inset-top)); /* iOS 노치 대응 */
    }
    .header__inner{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:12px;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
    .brand__logo{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:18px}
    .brand__title{font-size:1.35rem}

    /* 기본 버튼(본문용) */
    .btn{
      border:none;border-radius:10px;background:var(--btn);color:var(--btn-fg);
      padding:10px 14px;font-weight:800; /* 700→800 */
      cursor:pointer;box-shadow:0 6px 18px rgba(31,91,214,.25);
      transition:transform .1s ease, background .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .btn:hover{background:var(--btn-hover);transform:translateY(-1px)}
    .btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

    /* 헤더 전용 고대비 버튼(다크 모드에서 특히 가독성↑) */
    .header .btn{
      background:#ffffff;
      color:var(--brand);
      border:2px solid rgba(255,255,255,.85);
      box-shadow:0 8px 24px rgba(0,0,0,.18);
    }
    .header .btn:hover{
      background:#f5f7ff;
      color:var(--brand-2);
      transform:translateY(-1px);
    }
    @media (prefers-color-scheme:dark){
      .header .btn{
        background:#0b1220;
        color:#cfe1ff;
        border-color:rgba(207,225,255,.6);
      }
      .header .btn:hover{
        background:#111a2b;
        color:#ffffff;
      }
    }

    /* 레이아웃 */
    main{max-width:980px;margin:28px auto 40px auto;padding:0 12px}
    .grid{display:grid;gap:14px;grid-template-columns:repeat(6,1fr);justify-content:center}
    @media (max-width:720px){.grid{grid-template-columns:repeat(3,1fr);justify-content:center}}
    @media (max-width:520px){.grid{grid-template-columns:repeat(2,1fr);justify-content:center}}

    /* 카드 타일 */
    .tile{
      background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 12px;
      display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
      box-shadow:var(--shadow);transition:transform .1s ease, box-shadow .1s ease, border-color .2s ease;
      min-height:120px;
    }
    .tile:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.08)}
    .tile__icon{font-size:26px}
    .tile__label{font-weight:800}
    .tile__desc{font-size:.9rem;color:var(--muted);line-height:1.35}

    /* 섹션/카드 */
    .section{margin-top:22px}
    details.card{
      background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
      box-shadow:var(--shadow);overflow:hidden;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    details[open].card{border-color:var(--accent)}
    summary.card__header{
      list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
      padding:16px 18px;background:var(--card-2);border-bottom:1px solid var(--border);
      font-weight:900;font-size:1.05rem;
    }
    summary.card__header::-webkit-details-marker{display:none}
    .chev{display:inline-block;transform:rotate(0deg);transition:transform .2s ease}
    details[open] .chev{transform:rotate(90deg)}
    .card__body{padding:18px 20px}

    /* 강조/블록 */
    .note{background:var(--card-2);border-left:6px solid var(--accent);border-radius:12px;padding:16px 18px;line-height:1.85;margin-bottom:14px}
    .block{background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;line-height:1.85}

    /* 코드/리스트/FAQ */
    code{background:rgba(125,138,160,.15);border:1px solid var(--border);padding:.06em .45em;border-radius:6px;font-family:ui-monospace, Menlo, Consolas, monospace;font-size:.96em}
    .list{list-style:none;padding:0;margin:0}
    .list li{display:flex;gap:8px;align-items:flex-start;margin:.65em 0}
    .list .emoji{font-size:1.15em}
    .faq{color:var(--muted);padding-left:1.1em}
    .faq li{list-style:disc;margin-left:0}

    /* 쿠폰 */
    .coupon{
      display:block;max-width:860px;margin:28px auto 10px auto;text-align:center;
      background:var(--coupon-bg);border:2.5px dashed var(--coupon-border);border-radius:14px;
      padding:18px 12px;box-shadow:var(--shadow);color:#b14611;font-weight:800
    }
    .coupon small{display:block;margin-top:6px;font-weight:600;opacity:.9}

    /* 기타 */
    footer{margin:28px 0 18px 0;text-align:center;color:var(--muted);font-size:.98rem}
    .row{display:flex;flex-wrap:wrap;gap:12px}
    .grow{flex:1}
    .actions{display:flex;gap:8px;flex-wrap:wrap}
    .btn-outline{background:transparent;color:var(--btn);border:2px solid var(--btn);border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}
    .btn-outline:hover{background:rgba(122,167,255,.12)}
    :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
  </style>

<script>
  // WebDAV 안내 열기 + 주소 복사
  document.addEventListener('DOMContentLoaded', () => {
    const goWebdav = document.getElementById('go-webdav');
    const webdavCard = document.getElementById('webdav-card');
    const copyBtn = document.getElementById('copy-webdav');

    if (goWebdav && webdavCard){
      goWebdav.addEventListener('click', (e)=>{
        e.preventDefault();
        webdavCard.open = true;
        webdavCard.scrollIntoView({behavior:'smooth', block:'start'});
      });
    }

    if (copyBtn){
      copyBtn.addEventListener('click', async ()=>{
        const url = 'https://webdav.flathome.net';
        try{
          await navigator.clipboard.writeText(url);
          copyBtn.textContent = '복사됨';
          setTimeout(()=>copyBtn.textContent='주소 복사', 1200);
        }catch{
          alert('복사 실패. 수동으로 복사하세요: ' + url);
        }
      });
    }
  });
</script>

</head>

<body>
  <header class="header">
    <div class="header__inner">
      <div class="brand">
        <div class="brand__logo">🏠</div>
        <div class="brand__title">Flathome</div>
      </div>
      <div class="header__actions">
        <a class="btn" href="https://nas.flathome.net" target="_blank" >DSM 열기</a>
      </div>
    </div>
  </header>

  <main>
    <div class="grid">
      <a class="tile" href="https://nas.flathome.net" target="_blank" >
        <div class="tile__icon">🗂️</div><div class="tile__label">NAS 관리</div><div class="tile__desc">File Station</div>
      </a>
      <a class="tile" href="#" id="go-webdav">
        <div class="tile__icon">🌐</div><div class="tile__label">WebDAV</div><div class="tile__desc">드라이브 연결 안내</div>
      </a>
      <a class="tile" href="https://photo.flathome.net" target="_blank" >
        <div class="tile__icon">📷</div><div class="tile__label">Photos</div><div class="tile__desc">사진 관리</div>
      </a>
      <a class="tile" href="https://drive.flathome.net" target="_blank" >
        <div class="tile__icon">💾</div><div class="tile__label">Drive</div><div class="tile__desc">동기화/백업</div>
      </a>
      <a class="tile" href="https://jf.flathome.net" target="_blank" >
        <div class="tile__icon">🎬</div><div class="tile__label">Jellyfin</div><div class="tile__desc">미디어 서버</div>
      </a>
      <a class="tile" href="https://link.coupang.com/a/cJbgdO" target="_blank" >
        <div class="tile__icon">🛒</div><div class="tile__label">Coupang</div><div class="tile__desc">파트너스 링크</div>
      </a>
    </div>

    <section class="section">
      <details class="card">
        <summary class="card__header"><span class="chev">▶</span> 🗂️ NAS 서비스</summary>
        <div class="card__body">
          <div class="block">
            📷 <strong>사진:</strong> <a href="https://photo.flathome.net" target="_blank">photo.flathome.net</a> — <code>/home/photos</code> 에서 자동관리<br><br>
            💾 <strong>동기화/백업:</strong> <a href="https://drive.flathome.net" target="_blank">drive.flathome.net</a><br><br>
            📁 <strong>구형 앱:</strong> <a href="https://nas.flathome.net:443" target="_blank">nas.flathome.net:443</a>
          </div>
          <div class="block" style="margin-top:12px">
            <ul class="list">
              <li><span class="emoji">📂</span> <strong>공용 폴더:</strong> <code>/</code></li>
              <li><span class="emoji">🏠</span> <strong>사용자 홈:</strong> <code>/home</code></li>
              <li><span class="emoji">🔗</span> <strong>링크 공유:</strong> 우클릭 → 공유 → 링크 복사 → 저장</li>
              <li><span class="emoji">🎞️</span> <strong>동영상 재생:</strong> DSM 웹에서 파일 우클릭 → 재생</li>
            </ul>
          </div>
        </div>
      </details>
    </section>

    <section class="section">
      <details class="card" id="webdav-card">
        <summary class="card__header"><span class="chev">▶</span> 💻 PC/모바일 WebDAV 드라이브 연결</summary>
        <div class="card__body">
          <div class="block">
            🌐 <a href="https://webdav.flathome.net" target="_blank">https://webdav.flathome.net</a> (포트 <strong>443</strong>)
            <button class="btn-outline" id="copy-webdav">주소 복사</button>
          </div>
          <div class="block" style="margin-top:12px">
            💻 <strong>PC (RaiDrive)</strong><br>
            · 무광고 버전 권장 (<code>/Programs</code> 참고)<br>
            · "WebDAV 추가" 선택 → NAS 계정(ID/PW) 입력<br>
            · 네트워크 드라이브처럼 사용 가능
          </div>
          <div class="block" style="margin-top:12px">
            📱 <strong>모바일(CX 파일관리자 / nPlayer)</strong><br>
            · CX 파일관리자(Android), nPlayer(iOS) 등 지원 앱<br>
            · 주소, 계정 정보 입력 후 연결<br>
            · 폴더/파일 탐색 지원
          </div>
          <div class="note" style="margin-top:12px"><strong>참고:</strong> NAS 계정(ID/PW) 필요, 익명 접속 불가</div>
        </div>
      </details>
    </section>

    <section class="section">
      <details class="card">
        <summary class="card__header"><span class="chev">▶</span> 🎬 Jellyfin 미디어 서버</summary>
        <div class="card__body">
          <ul class="list">
            <li>🔗 <a href="https://jf.flathome.net" target="_blank"><strong>Jellyfin 접속   |    https://jf.flathome.net</strong></a></li>
            <li>📲 <a href="https://jellyfin.org/downloads" target="_blank"><strong>앱 다운로드</strong></a></li>
            <li>🗂️ MEDIA 폴더 내 라이브러리 요청 시 등록</li>
            <li>🔑 SSO 로그인만 지원 (NAS 계정 연동)</li>
          </ul>
        </div>
      </details>
    </section>

    <section class="section">
      <details class="card">
        <summary class="card__header"><span class="chev">▶</span> ❓ 자주 묻는 질문(FAQ)</summary>
        <div class="card__body">
          <ul class="faq">
            <li>⚠️ QuickConnect 사용 권장하지 않음</li>
            <li>🔐 NAS 계정(ID/PW) 필수, 익명 접속 불가</li>
            <li>💬 문의는 관리자에게 별도 문의</li>
          </ul>
        </div>
      </details>
    </section>

    <a href="https://link.coupang.com/a/cJbgdO" class="coupon" target="_blank" >
      🛒 Coupang
      <small>쿠팡 파트너스 활동으로 일정 수수료를 받을 수 있습니다.</small>
    </a>
  </main>

  <footer>© 2025 Flathome. All rights reserved.</footer>
</body>
</html>