<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#f5f2eb">
    <title>oooz</title>
    
    <link rel="icon" type="image/png" sizes="16x16" href="assets/fav_16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/fav_32.png">
    <link rel="icon" type="image/png" sizes="48x48" href="assets/fav_48.png">
    
    <link rel="icon" type="image/png" sizes="512x512" href="assets/fav_512.png">

    <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=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        /* 이미지 기반 오가닉 크림 & 딥그린 팔레트 */
        :root {
            --md-bg: #f5f2eb;
            --md-surface: #eadecd;
            --md-surface-variant: #dfd4c1;
            --md-primary: #1b4d3e;
            --md-secondary: #2c6b56;
            
            --color-text: #1b4d3e;
            --color-subtext: #5c7a6f;
            --gap: 16px;
        }

        html, body {
            overflow-x: hidden;
        }

        html.modal-open,
        body.modal-open {
            overflow: hidden;
            height: 100%;
            overscroll-behavior: none;
        }

        body { 
            font-family: 'Pretendard', -apple-system, sans-serif; 
            background-color: var(--md-bg);
            margin: 0; padding: 20px; 
            color: var(--color-text);
            /* 모바일 터치 시 발생하는 브라우저 기본 하이라이트 블루 색상 제거 */
            -webkit-tap-highlight-color: transparent; 
        }
        
        .container { 
            width: 100%; max-width: 1100px; margin: 0 auto; 
            min-height: calc(100vh - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center;
        }

        /* 메인 그리드 틀 */
        .grid { 
            display: grid; width: 100%; gap: var(--gap);
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 184px;
            margin-top: 18px;
        }

        .grid-item {
            border-radius: 24px; 
            background-color: var(--md-surface);
            box-shadow: 0 4px 12px rgba(27, 77, 62, 0.05); 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden; position: relative;
            box-sizing: border-box;
        }


        /* 데스크톱 레이아웃: 좌측 대형 카드 + 우측 프로필/아이콘 + 하단 3D(2칸) */
        @media (min-width: 601px) {
            .grid {
                grid-template-columns: 1fr 1.35fr 1.35fr 1fr;
                grid-template-rows: 184px 184px;
                grid-auto-rows: 184px;
                overflow: visible;
            }

            .item-texas { grid-column: 1 / span 2; grid-row: 1 / span 2; }

            .item-onesound { grid-column: 3; grid-row: 1; }
            .item-icons { grid-column: 4; grid-row: 1; }
            .item-3d { grid-column: 3 / span 2; grid-row: 2; }

            .item-icons {
                border-radius: 16px;
            }

            .item-texas {
                z-index: 30;
            }

            .item-texas .card-cover {
                z-index: 31;
            }

            .item-texas .card-content {
                z-index: 32;
            }

            .item-3d {
                z-index: 2;
            }
        }

        /* 비활성 카드는 표시하되 클릭 불가 상태로 유지 */
        .grid-item.disabled {
            opacity: 0.62;
            filter: saturate(0.72);
        }

        .grid-item.disabled .card {
            cursor: default;
        }

        .grid-item.disabled .card-title,
        .grid-item.disabled .card-text {
            color: rgba(92, 122, 111, 0.48);
        }

        .card.card-disabled-logo {
            justify-content: center;
            align-items: center;
            padding: 0;
        }

        .card.card-account {
            justify-content: flex-end;
            align-items: flex-start;
            padding: 0;
        }

        .account-logo {
            width: 64px;
            height: 64px;
            object-fit: contain;
            opacity: 0.3;
            user-select: none;
            pointer-events: none;
            display: block;
            margin-left: 18px;
            margin-bottom: -4px;
        }

        .disabled-logo {
            width: 30px;
            height: 30px;
            object-fit: contain;
            opacity: 0.3;
            user-select: none;
            pointer-events: none;
        }

        .card.card-disabled-quad {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
            place-items: center;
            gap: 8px;
            padding: 14px;
            justify-content: initial;
        }

        /* 활성 카드 호버 효과 */
        .grid-item.active:not(.no-hover):hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 24px rgba(27, 77, 62, 0.12);
            z-index: 10;
        }

        /* 모바일 레이아웃 반응형: 빈 공간 없이 활성 카드만 순서대로 밀착 나열 */
        @media (max-width: 600px) {
            .grid { display: flex; flex-direction: column; }
            .grid-item { width: 100%; height: 168px; }
            .item-texas { height: 260px; } /* 데스크톱 비율에 가깝게 조정 */
            .item-3d { height: 184px; }     /* 3D 영역 크기 유지 */
        }

        .card { 
            width: 100%; height: 100%; display: flex; flex-direction: column; 
            justify-content: flex-end; padding: 28px; box-sizing: border-box; 
            cursor: pointer;
        }

        .card-cover {
            position: absolute;
            top: -4%;
            left: 0;
            right: 0;
            width: 100%;
            height: 108%;
            object-fit: cover;
            object-position: right center;
            z-index: 1;
        }

        .card-pattern {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
        }

        .card-content {
            position: relative;
            z-index: 2;
            margin-top: auto;
        }

        .item-texas {
            overflow: visible;
            z-index: 8;
        }

        .item-texas .card {
            position: relative;
            overflow: visible;
        }

        .item-3d {
            position: relative;
            z-index: 1;
        }

        /* 900px 전후 구간에서 메인 카드 타이틀 영역 확보 */
        @media (max-width: 920px) and (min-width: 601px) {
            .grid {
                top: 32px;
            }

            .item-texas,
            .item-texas .card {
                overflow: visible;
            }

            .item-texas .card {
                padding: 24px;
            }

            .item-texas .card-content {
                max-width: 54%;
            }

            .item-texas .card-cover {
                left: auto;
                right: 0px;
                top: 15px;
                width: 68%;
                height: 98%;
                object-position: 60% center;
                clip-path: inset(-10% 0 -10% 0);
            }
        }

        /* 모바일에서 큰 카드 이미지가 깨져 보이지 않도록 마지막에 우선 적용 */
        @media (max-width: 600px) {
            .item-texas,
            .item-texas .card {
                overflow: visible;
            }

            .item-texas .card {
                padding: 22px;
            }

            .item-texas .card-content {
                max-width: 60%;
            }

            .item-texas .card-cover {
                top: -1%;
                left: auto;
                right: 0;
                width: clamp(250px, 72vw, 315px);
                height: 102%;
                max-width: none;
                transform: translateX(20%);
                object-position: right center;
                clip-path: inset(-10% 20% -10% 0);
            }
        }

        /* 메인 활성 카드 배경 배색 */
        .item-texas.active { background-color: var(--md-primary) !important; }
        .item-texas.active .card-title { color: var(--md-bg); }
        .item-texas.active .card-text { color: rgba(245, 242, 235, 0.65); }

        .item-onesound.active { background-color: var(--md-secondary) !important; }
        .item-onesound.active .card-title { color: var(--md-bg); }
        .item-onesound .card-title { font-size: clamp(0.95rem, 2.4vw, 1.5rem); }
        .item-onesound .card { justify-content: center; align-items: center; padding: 0; }
        .item-onesound.active .card-text { color: rgba(245, 242, 235, 0.65); }
        
        .card-title {
            font-size: 1.5rem;
            font-weight: 400;
            margin: 0 0 2px 0;
            color: var(--color-text);
            font-family: "Space Grotesk", "Pretendard", -apple-system, sans-serif;
            letter-spacing: 0.3px;
        }
        .card-text { font-size: 0.68rem; margin: 0; line-height: 1.35; color: rgba(92, 122, 111, 0.82); }

        .bg-3d { background-color: var(--md-surface); border: 1px solid rgba(27, 77, 62, 0.1); }

        /* ==========================================================================
           풀스크린 팝업 시스템 (Full-Screen Popup)
           ========================================================================== */
        .modal-overlay {
            --popup-base: var(--md-primary);
            --popup-base-strong: #1f242b;
            --popup-surface: var(--md-surface);
            --popup-surface-soft: var(--md-surface-variant);
            --popup-text: var(--color-text);
            --popup-muted: var(--color-subtext);
            --popup-card-bg: var(--md-bg);
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--md-bg);
            display: none; z-index: 1000;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .modal-card { 
            background: var(--popup-card-bg); width: 100%; max-width: 1100px;
            margin: 0 auto;
            min-height: 100dvh; display: flex; flex-direction: column;
            overflow: visible;
            box-shadow: none; border: none; box-sizing: border-box;
            animation: fs-open 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #modal-texas-hub {
            --popup-base: #5a0000;
            --popup-base-strong: #420000;
            --popup-surface: #7a1a1a;
            --popup-surface-soft: #8f2a2a;
            --popup-text: #f9ecec;
            --popup-muted: rgba(249, 236, 236, 0.78);
            --popup-card-bg: transparent;
            background: linear-gradient(180deg, #2b0000 0%, #3a0000 45%, #4a0000 100%);
        }

        #modal-texas-hub .modal-card {
            min-height: auto;
        }

        #modal-texas-hub .modal-body {
            flex: 0 0 auto;
        }

        #modal-texas-hub .bento-panel {
            background: transparent;
            border: none;
        }

        #modal-texas-hub .bento-desc {
            background: transparent;
            border-color: transparent;
        }

        #modal-texas-hub .modal-footer {
            margin-top: 4px;
            padding: 6px 24px 16px;
        }

        @keyframes fs-open {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .modal-banner-img {
            width: 100%; height: 260px; object-fit: cover; display: block;
            border-bottom: 1px solid rgba(27, 77, 62, 0.08);
        }
        
        .modal-body { padding: 40px 24px 24px; color: var(--popup-text); flex: 1; }
        .modal-body h2 { margin: 0 0 12px; font-size: 2rem; color: var(--popup-text); font-weight: 700; }
        .modal-body p { margin: 0 0 32px; color: var(--popup-muted); line-height: 1.6; font-size: 1rem; }
        
        .modal-footer { display: flex; flex-direction: column; padding: 24px; gap: 12px; }

        @media (max-width: 719px) {
            .modal-card {
                max-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .modal-banner-img {
                height: 220px;
            }

            .modal-body {
                padding: 28px 16px 20px;
            }

            .modal-body h2 {
                font-size: 1.6rem;
            }

            .modal-footer {
                padding: 16px;
            }

            #modal-texas-hub .modal-footer {
                margin-top: 2px;
                padding: 6px 16px 14px;
            }
        }

        .close-text { 
            text-align: center; padding: 16px; 
            background-color: var(--popup-surface-soft); color: var(--popup-text); 
            border-radius: 100px; cursor: pointer; font-size: 1rem; font-weight: 600; 
            transition: all 0.2s ease; box-sizing: border-box;
            border: 1px solid rgba(249, 236, 236, 0.22);
        }
        .close-text:hover {
            background-color: var(--popup-base);
            color: #f8f1e8;
            border-color: var(--popup-base-strong);
        }

        /* 링크 그룹 분할 레이아웃 스타일 */
        .modal-links-section { display: flex; flex-direction: column; gap: 28px; width: 100%; }
        .link-group { display: flex; flex-direction: column; gap: 10px; }
        .link-group-title {
            font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
            color: var(--popup-muted); letter-spacing: 1.5px; margin-bottom: 6px; padding-left: 4px;
        }
        
        .link-grid-2x { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .link-grid-4x { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        @media (max-width: 480px) {
            .link-grid-2x, .link-grid-4x { grid-template-columns: 1fr; }
        }
        
        .modal-ln-btn {
            display: flex; align-items: center; justify-content: center;
            padding: 16px 12px; border-radius: 16px; background: #f7eee7; color: #b44c19;
            text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: all 0.2s ease;
            border: 1px solid rgba(180, 76, 25, 0.28); text-align: center;
        }
        .modal-ln-btn:hover {
            background: var(--popup-base);
            color: #fff4ec;
            border-color: var(--popup-base-strong);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(31, 36, 43, 0.2);
        }

        /* Texas Hub 모달 전용 벤토 그리드 */
        .texas-bento-body {
            padding: 20px;
        }

        .texas-bento-grid {
            display: grid;
            grid-template-columns: 440px minmax(0, 1fr);
            grid-template-areas:
                "image right";
            column-gap: 12px;
            row-gap: 0;
            align-items: stretch;
        }

        .bento-right-column {
            grid-area: right;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .bento-panel {
            background: var(--popup-surface);
            border: 1px solid rgba(249, 236, 236, 0.16);
            border-radius: 20px;
            padding: 16px;
            box-sizing: border-box;
        }

        .bento-image {
            grid-area: image;
            min-height: 0;
            padding: 0;
            overflow: hidden;
        }

        .bento-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .bento-desc {
            background: var(--popup-base);
            border-color: rgba(249, 236, 236, 0.2);
            color: var(--popup-text);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .bento-desc h2 {
            margin: 0;
            font-size: 1.8rem;
            color: var(--popup-text);
            font-family: "Space Grotesk", "Pretendard", -apple-system, sans-serif;
            font-weight: 400;
            letter-spacing: 0.2px;
            line-height: 1.2;
        }

        .bento-desc p {
            margin: 0;
            color: var(--popup-muted);
            line-height: 1.6;
        }

        .bento-desc p.bento-story {
            font-size: 0.92rem;
        }

        .bento-desc p.bento-meta {
            font-size: 0.74rem;
            color: rgba(249, 236, 236, 0.34);
            letter-spacing: 0.2px;
            line-height: 1.35;
            margin-top: 3px;
            margin-bottom: 14px;
        }

        .desc-primary-links {
            margin-top: 20px;
            padding-top: 0;
        }

        .bento-desc .modal-ln-btn {
            padding: 8px 10px;
            min-height: 34px;
            border-radius: 12px;
            font-size: 0.88rem;
        }

        .bento-desc .link-group-title {
            color: rgba(249, 236, 236, 0.78);
        }

        .bento-links {
            margin-top: 0;
        }

        .bento-links-wrap {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .bento-links .link-grid-4x {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
        }

        .bento-links .modal-ln-btn {
            background: rgba(249, 236, 236, 0.16);
            color: rgba(249, 236, 236, 0.92);
            border-color: rgba(249, 236, 236, 0.26);
            padding: 6px 6px;
            min-height: 30px;
            border-radius: 10px;
            font-size: 0.84rem;
            font-weight: 600;
        }

        .bento-links .modal-ln-btn:hover {
            background: rgba(249, 236, 236, 0.24);
            color: #fff6f6;
            border-color: rgba(249, 236, 236, 0.4);
        }

        .bento-links .bento-link-note {
            margin: 8px 2px 0;
            font-size: 0.74rem;
            line-height: 1.35;
            color: rgba(249, 236, 236, 0.62);
            letter-spacing: 0.2px;
            text-align: right;
        }

        @media (min-width: 720px) {
            #modal-texas-hub {
                align-items: center;
            }

            #modal-texas-hub .modal-card {
                max-width: 940px;
                margin: auto;
            }

            .texas-bento-grid {
                grid-template-columns: 400px minmax(0, 1fr);
                grid-template-rows: auto auto;
            }

            .bento-links,
            .bento-desc {
                width: 100%;
            }

            .bento-links .link-grid-4x {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }
        }

        @media (max-width: 719px) {
            .texas-bento-grid {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "image"
                    "right";
                row-gap: 12px;
            }

            .bento-right-column {
                gap: 12px;
            }

            .bento-image {
                min-height: 280px;
            }

            .bento-links .link-grid-4x {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .texas-bento-body {
                padding: 16px;
            }

            .bento-panel {
                border-radius: 16px;
                padding: 16px;
            }

            .bento-image {
                min-height: 220px;
                padding: 0;
            }

            .bento-desc h2 {
                font-size: 1.5rem;
            }

            .bento-links .link-grid-4x {
                grid-template-columns: 1fr;
            }
        }

        /* 프로필 상세 레이아웃 전용 구조 */
        .modal-profile-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0 30px 0; }
        .modal-profile-avatar {
            width: 120px; height: 120px; border-radius: 50%; background: var(--popup-surface-soft);
            margin-bottom: 24px; overflow: hidden; border: 3px solid rgba(249, 236, 236, 0.24);
        }
        .modal-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .modal-profile-name { font-size: 1.8rem; font-weight: 700; margin: 0 0 8px 0; color: var(--popup-text); }
        .modal-profile-location { font-size: 1rem; color: var(--popup-muted); margin: 0 0 6px 0; font-weight: 500; letter-spacing: 0.5px; }

        #modal-profile-onesound {
            background: var(--md-bg);
        }

        /* 깃허브 방문하기 전용 스타일 버튼 */
        .github-btn {
            display: flex; align-items: center; justify-content: center;
            width: 100%; max-width: 280px; margin: 30px auto 0 auto; padding: 14px 20px;
            background-color: #f7eee7; color: #b44c19;
            border-radius: 100px; font-size: 0.95rem; font-weight: 600;
            text-decoration: none; box-sizing: border-box; transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(180, 76, 25, 0.16);
        }
        .github-btn:hover {
            background-color: var(--md-secondary);
            color: #fff4ec;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(44, 107, 86, 0.25);
        }
        .github-btn svg { margin-right: 8px; fill: currentColor; }

        .site-credit {
            display: none;
            width: 100%;
            text-align: center;
            margin-top: 18px;
            font-size: 0.7rem;
            color: rgba(92, 122, 111, 0.5);
            letter-spacing: 0.2px;
            user-select: none;
            pointer-events: none;
        }

        #canvas-3d { width: 100%; height: 100%; min-width: 100%; min-height: 100%; display: block; }
    </style>
</head>
<body>

<div class="container">
    <div class="grid">
        <div class="grid-item item-texas active" onclick="openPopup('modal-texas-hub')">
            <div class="card">
                <img src="image/holdem.png" alt="Texas Hold'em" class="card-cover">
                <img src="image/pattern.png" alt="Pattern Overlay" class="card-pattern">
                <div class="card-content">
                    <h3 class="card-title">Texas Hold'em</h3>
                    <p class="card-text">© 2015, 2020</p>
                </div>
            </div>
        </div>

        <div class="grid-item item-onesound active" onclick="openPopup('modal-profile-onesound')">
            <div class="card">
                <h3 class="card-title">onesound</h3>
            </div>
        </div>

        <div class="grid-item item-3d bg-3d active no-hover">
            <div id="canvas-3d"></div>
        </div>

        <div class="grid-item item-icons disabled">
            <div class="card card-disabled-quad" aria-label="Disabled Icons">
                <img src="image/home-assistant.png" alt="Home Assistant" class="disabled-logo">
                <img src="image/github.png" alt="GitHub" class="disabled-logo">
                <img src="image/nintendo-game-boy.png" alt="Nintendo Game Boy" class="disabled-logo">
                <img src="image/stock.png" alt="GitHub" class="disabled-logo">
            </div>
        </div>
    </div>

    <div class="site-credit">Built with Cloudflare Pages</div>
</div>

<div id="modal-texas-hub" class="modal-overlay">
    <div class="modal-card">
        <div class="modal-body texas-bento-body">
            <div class="texas-bento-grid">
                <section class="bento-panel bento-image">
                    <img src="image/holdem_cover.png" alt="Hub Image">
                </section>

                <div class="bento-right-column">
                    <section class="bento-panel bento-desc">
                        <h2>Texas Hold'em</h2>
                        <p class="bento-meta">Webcomic | 2015, 2020</p>
                        <p class="bento-story">The story of a former StarCraft pro gamer who gets into online poker.</p>

                        <div class="link-group desc-primary-links">
                            <div class="link-group-title">Web | Korean</div>
                            <div class="link-grid-2x">
                                <a href="https://comic.naver.com/webtoon/list?titleId=746746" class="modal-ln-btn">Naver Webtoon</a>
                                <a href="https://series.naver.com/comic/detail.series?productNo=10427172" class="modal-ln-btn">Series</a>
                            </div>
                        </div>
                    </section>

                    <section class="bento-panel bento-links">
                        <div class="bento-links-wrap">
                            <div class="link-group">
                                <div class="link-group-title">Comic Book</div>
                                <div class="link-grid-4x">
                                    <a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=306573068" target="_blank" class="modal-ln-btn">Aladin</a>
                                    <a href="https://www.yes24.com/product/goods/116046911" target="_blank" class="modal-ln-btn">Yes24</a>
                                    <a href="https://www.coupang.com/vp/products/7577623888?itemId=19997099244&vendorItemId=84213685326&q=%ED%85%8D%EC%82%AC%EC%8A%A4+%ED%99%80%EB%8D%A4&searchId=604f748520528862&sourceType=search&itemsCount=36&searchRank=3&rank=3&traceId=mpp16h2q" target="_blank" class="modal-ln-btn">Coupang</a>
                                    <a href="https://product.kyobobook.co.kr/detail/S000200416097" target="_blank" class="modal-ln-btn">Kyobo</a>
                                </div>
                                <p class="bento-link-note">Complete in 2 Volumes</p>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="close-text" onclick="closePopup()">Back</div>
        </div>
    </div>
</div>

<div id="modal-profile-onesound" class="modal-overlay">
    <div class="modal-card">
        <div class="modal-body">
            <div class="modal-profile-wrapper">
                <div class="modal-profile-avatar">
                    <img src="image/profile.jpg" alt="onesound Profile">
                </div>
                <h3 class="modal-profile-name">onesound</h3>
                <p class="modal-profile-location">Cartoonist</p>
                <p class="modal-profile-location">📍 Seoul, Korea</p>
                
                <a href="https://github.com/onesounds" target="_blank" class="github-btn" style="display:none">
                    <svg height="20" width="20" viewBox="0 0 16 16">
                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
                    </svg>
                    GitHub
                </a>
            </div>
        </div>
        <div class="modal-footer">
            <div class="close-text" onclick="closePopup()">Back</div>
        </div>
    </div>
</div>

<script>
    // --- 히스토리 기반 풀스크린 팝업 제어 로직 (Hash 버전) ---
    let currentPopupId = null;

    // 모달 DOM ID와 URL에 매핑할 직관적이고 짧은 이름 정의
    const popupMapping = {
        'modal-texas-hub': 'holdem',
        'modal-profile-onesound': 'onesound'
    };

    function resetPopupScroll(id) {
        const popup = document.getElementById(id);
        if (!popup) return;
        popup.scrollTop = 0;
        popup.querySelectorAll('.modal-card, .modal-body').forEach((el) => {
            el.scrollTop = 0;
        });
    }

    function openPopup(id) {
        currentPopupId = id;
        document.getElementById(id).style.display = 'flex';
        resetPopupScroll(id);
        document.documentElement.classList.add('modal-open');
        document.body.classList.add('modal-open');
        
        // 주소창을 파라미터 대신 '현재주소/#/hub' 형태로 변경 (히스토리 적재)
        const shortName = popupMapping[id] || id;
        history.pushState({ popup: id }, "", "#/" + shortName);
    }

    function closePopup() {
        if (!currentPopupId) return;
        document.getElementById(currentPopupId).style.display = 'none';
        document.documentElement.classList.remove('modal-open');
        document.body.classList.remove('modal-open');
        currentPopupId = null;
        
        // 닫힐 때 해시(#/) 제거하여 메인 주소로 원복
        if (window.location.hash) {
            history.pushState(null, "", window.location.pathname);
        }
    }

    // 브라우저 뒤로가기 / 앞으로가기 처리
    window.addEventListener('popstate', (event) => {
        // 모든 팝업을 먼저 닫기 처리
        Object.keys(popupMapping).forEach(id => {
            document.getElementById(id).style.display = 'none';
        });
        document.documentElement.classList.remove('modal-open');
        document.body.classList.remove('modal-open');
        currentPopupId = null;

        // URL의 해시값을 추출하여 매핑되는 팝업 열기
        const hash = window.location.hash.replace('#/', '');
        if (hash) {
            const targetId = Object.keys(popupMapping).find(key => popupMapping[key] === hash);
            if (targetId) {
                currentPopupId = targetId;
                document.getElementById(targetId).style.display = 'flex';
                resetPopupScroll(targetId);
                document.documentElement.classList.add('modal-open');
                document.body.classList.add('modal-open');
            }
        }
    });

    // 주소창에 직접 http://.../#/hub 처럼 진입했을 때 바로 팝업을 띄워주는 로직
    window.addEventListener('DOMContentLoaded', () => {
        const hash = window.location.hash.replace('#/', '');
        if (hash) {
            const targetId = Object.keys(popupMapping).find(key => popupMapping[key] === hash);
            if (targetId) {
                setTimeout(() => {
                    currentPopupId = targetId;
                    document.getElementById(targetId).style.display = 'flex';
                    resetPopupScroll(targetId);
                    document.documentElement.classList.add('modal-open');
                    document.body.classList.add('modal-open');
                }, 150);
            }
        }

    });


    // --- Three.js Setup ---
    const canvasCont = document.getElementById('canvas-3d');
    const scene = new THREE.Scene();
    
    const width = canvasCont.clientWidth || 200;
    const height = canvasCont.clientHeight || 200;
    const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
    camera.position.z = 6;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    canvasCont.appendChild(renderer.domElement);

    const shape = new THREE.Shape();
    shape.moveTo(0, 0); shape.quadraticCurveTo(1.5, 0, 1.5, 1); shape.quadraticCurveTo(1.5, 2, 0, 2);
    shape.quadraticCurveTo(-1.5, 2, -1.5, 1); shape.quadraticCurveTo(-1.5, 0, -0.5, 0);
    shape.lineTo(-0.8, -0.5); shape.lineTo(0, 0);

    const material = new THREE.MeshStandardMaterial({ 
        color: 0x1b4d3e, metalness: 0.2, roughness: 0.4, emissive: 0x0d2b22, emissiveIntensity: 0.1
    });
    const balloon = new THREE.Mesh(new THREE.ExtrudeGeometry(shape, { depth: 0.4, bevelEnabled: true, bevelThickness: 0.1, bevelSize: 0.1 }), material);
    balloon.geometry.center();
    scene.add(balloon);

    scene.add(new THREE.AmbientLight(0xffffff, 1.2));
    const light = new THREE.DirectionalLight(0xffffff, 1.2);
    light.position.set(2, 4, 5);
    scene.add(light);

    let targetX = 0, targetY = 0;
    const updateRotation = (clientX, clientY) => {
        targetX = (clientX / window.innerWidth - 0.5) * 1.2;
        targetY = (clientY / window.innerHeight - 0.5) * 0.8;
    };
    window.addEventListener('mousemove', (e) => updateRotation(e.clientX, e.clientY));
    window.addEventListener('touchmove', (e) => {
        if(e.touches.length > 0) updateRotation(e.touches[0].clientX, e.touches[0].clientY);
    }, { passive: true });

    function animate() {
        requestAnimationFrame(animate);
        balloon.rotation.y += (targetX - balloon.rotation.y) * 0.1;
        balloon.rotation.x += (targetY - balloon.rotation.x) * 0.1;
        renderer.render(scene, camera);
    }
    animate();

    const resizeCanvas = () => {
        const w = canvasCont.clientWidth; const h = canvasCont.clientHeight;
        camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h);
    };
    window.addEventListener('resize', resizeCanvas);
    window.addEventListener('load', resizeCanvas);
    setTimeout(resizeCanvas, 100); 
</script>
</body>
</html>