/* Readable type and a compact app library within the original pixel palette. */
@font-face { font-family: 'Press Start 2P'; src: url('./instagram/assets/fonts/PressStart2P.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Pretendard; src: url('./fonts/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Pretendard; src: url('./fonts/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 500 900; font-display: swap; }
:root { --home-muted: #665b46; --home-line: #ded3b9; --home-soft: #f7f1df; --home-blue: #255f9e; }
:root[data-theme="dark"] { --home-muted: #c5b99f; --home-line: #68593f; --home-soft: #342b1c; --home-blue: #96caff; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { color: var(--text); font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; }
body::before { content: ''; position: fixed; z-index: -1; inset: auto 0 0; height: 380px; background: url('./image/hojin-opening-game-v2.webp') center bottom / cover no-repeat; opacity: .45; pointer-events: none; }
:root[data-theme="dark"] body::before { filter: brightness(.4); }
button, input, select, textarea { font-family: inherit; }
.home-wrap { max-width: 1480px; padding: 24px 28px 32px; margin: auto; position: relative; z-index: 1; }
.home-wrap a { color: inherit; }
.home-wrap a, .home-wrap button { -webkit-tap-highlight-color: transparent; }
.home-wrap [hidden] { display: none !important; }
.home-panel { min-width: 0; background: var(--white); border: 3px solid var(--border); box-shadow: 3px 3px 0 var(--border); border-radius: 6px; }
.home-icon { width: 24px; height: 24px; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: #1a1000; stroke-width: 1.5; stroke-linejoin: miter; }
.home-topbar { display: flex; align-items: center; gap: 24px; padding: 12px 20px; }
.home-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.home-brand img { width: 48px; height: 48px; object-fit: contain; }
.home-brand strong { display: block; font-size: 27px; line-height: 1.2; letter-spacing: -.5px; font-weight: 600; }
.home-brand span { font-size: 14px; color: var(--home-muted); }
.home-tagline { color: var(--home-muted); font-size: 15px; border-left: 1px solid var(--home-line); padding-left: 24px; }
.home-top-actions { display: flex; gap: 8px; margin-left: auto; }
.home-top-actions a, .home-top-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--home-line); border-radius: 4px; background: var(--home-soft); font-size: 14px; color: var(--text); text-decoration: none; cursor: pointer; }
.home-news { margin: 18px 0; padding: 12px 18px 14px; }
#notices-panel.home-news { border-width: 3px; box-shadow: 3px 3px 0 var(--border); margin-bottom: 18px; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-section-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.home-text-button { padding: 8px; min-height: 40px; border: 0; background: transparent; color: var(--home-blue); font-size: 14px; cursor: pointer; }
.home-news #notice-box { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 10px; padding: 12px 14px; background: var(--yellow); color: #1a1000; border: 1px solid #b58a26; border-radius: 4px; box-shadow: none; }
.home-news .notice-badge { background: #fff9e9; color: #644b17; border: 1px solid #b58a26; padding: 2px 8px; flex-shrink: 0; font: 600 13px/1.8 Pretendard, sans-serif; }
.notice-content { min-width: 0; }
.home-news #notice-text { font: 600 16px/1.6 Pretendard, sans-serif; color: #1a1000; overflow-wrap: anywhere; }
.home-news #notice-date { display: block; font-size: 13px; color: #5c4820; }
.home-news #notice-date:empty { display: none; }
.home-news .notices-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 20px; }
.home-news .notice-row { display: flex; align-items: flex-start; gap: 8px; padding: 0; background: transparent; border: 0; }
.home-news:not(.show-all) .notice-row:nth-child(n+3) { display: none; }
.home-news.show-all .notices-list { grid-template-columns: 1fr; }
.notice-update-label { font-size: 12px; color: var(--home-blue); background: var(--home-soft); border-radius: 3px; padding: 2px 6px; flex-shrink: 0; }
.home-news .notice-row-text { font: 400 14px/1.6 Pretendard, sans-serif; color: var(--home-muted); padding: 0; overflow-wrap: anywhere; }
.home-layout { display: grid; grid-template-columns: 228px minmax(0,1fr); align-items: start; gap: 20px; }
.home-profile { padding: 16px 14px; }
.home-profile-summary { text-align: center; }
.home-portrait { display: flex; justify-content: center; align-items: end; background: #b9e4fb; border: 1px solid #98c8e3; height: 100px; overflow: hidden; border-radius: 4px; }
.home-portrait img { width: 88px; height: 88px; object-fit: contain; }
.home-profile h2 { font-size: 20px; line-height: 1.4; margin-top: 12px; font-weight: 600; }
.home-profile-role { font-size: 13px; color: var(--home-muted); margin-top: 4px; }
.home-maker-link { display: flex; align-items: center; gap: 10px; min-height: 66px; margin: 16px 0; padding: 10px 12px; background: var(--yellow); color: #1a1000 !important; border: 2px solid var(--border); box-shadow: 2px 2px 0 var(--border); border-radius: 4px; text-decoration: none; }
.home-maker-link > span:first-of-type { flex: 1; min-width: 0; }
.home-maker-link strong { display: block; font-size: 17px; font-weight: 600; }
.home-maker-link small { display: block; font-size: 12px; color: #5c4820; }
.home-maker-link > span:last-child { font-size: 24px; }
.home-nav { display: flex; flex-direction: column; gap: 6px; }
.home-nav a, .home-nav button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 48px; width: 100%; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text); text-decoration: none; font-size: 16px; line-height: 1.5; font-weight: 500; text-align: left; cursor: pointer; }
.home-nav .is-active { background: var(--yellow); color: #1a1000; border-color: #b58a26; }
.home-nav .nav-arrow { margin-left: auto; }
.home-nav a:hover, .home-nav button:hover { background: var(--home-soft); }
.home-nav .is-active:hover { background: var(--yellow); }
.home-profile-message { text-align: center; margin-top: 22px; padding: 12px 4px; border-top: 1px solid var(--home-line); color: var(--home-muted); font-size: 14px; }
.home-visitors { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--home-muted); }
.home-visitors .ldot { font-size: 13px; color: var(--text); }
.home-feedback-link { display: block; text-align: center; margin-top: 16px; font-size: 14px; color: var(--home-blue) !important; }
.home-library { padding: 20px; scroll-margin-top: 20px; }
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.library-heading h1 { font-size: 26px; line-height: 1.4; font-weight: 600; letter-spacing: -.5px; }
.library-heading img { width: 56px; height: 56px; object-fit: contain; }
.home-section-caption { color: var(--home-muted); font-size: 15px; margin-top: 4px; }
.home-library #search-input { width: 100%; padding: 13px 16px; min-height: 52px; margin-bottom: 16px; border: 2px solid #6c9ec7; box-shadow: none; border-radius: 5px; background: var(--white); color: var(--text); font: 400 16px/1.5 Pretendard, sans-serif; }
.home-library #search-input::placeholder { color: var(--home-muted); opacity: 1; }
.home-library .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.home-library .tab-btn { font: 500 15px/1.5 Pretendard, sans-serif; padding: 9px 12px; min-height: 44px; border: 1px solid var(--home-line); border-radius: 4px; box-shadow: none; background: var(--home-soft); color: var(--text); }
.home-library .tab-btn.active { background: var(--yellow); color: #1a1000; border-color: #b58a26; }
.home-library .tab-count { font-size: 12px; padding: 0 4px; border: 0; box-shadow: none; margin-left: 4px; background: transparent; color: inherit; }
.home-library .collection-chips { margin-bottom: 14px; }
.home-library .collection-chip { font: 400 14px/1.5 Pretendard, sans-serif; padding: 9px 12px; min-height: 44px; border-width: 1px; border-radius: 4px; box-shadow: none; }
.home-library .toolbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.library-result-count { margin-right: auto; font-size: 14px; color: var(--home-muted); }
.library-view-label { padding: 4px 8px; background: var(--yellow); color: #1a1000; border-radius: 3px; font-size: 14px; font-weight: 600; }
.home-library .sort-select, .home-library .view-toggle-btn { padding: 9px 10px; min-height: 44px; font: 400 14px/1.5 Pretendard, sans-serif; border: 1px solid var(--home-line); border-radius: 4px; box-shadow: none; background: var(--white); color: var(--text); }
.home-library #grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.home-library .card-wrap { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 1fr auto auto; align-content: start; background: var(--white); border: 2px solid var(--border); border-radius: 5px; box-shadow: 2px 2px 0 var(--border); overflow: hidden; transition: border-color .15s; }
.home-library .card-wrap:hover { transform: none; box-shadow: 2px 2px 0 var(--border); border-color: #5c85ac; }
.home-library .card-wrap.hidden { display: none; }
.card-summary { grid-column: 1 / -1; padding: 16px 14px; display: flex; flex-direction: column; }
.app-card-heading { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.app-card-icon { width: 54px; height: 54px; background: #e1f1fc; border: 1px solid #b0d1e7; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.home-library .card-thumb { display: block; width: 54px; height: 54px; object-fit: cover; border: 0; }
.home-library .card-thumb-placeholder { display: inline; height: auto; width: auto; font-size: 28px; line-height: 1.4; background: transparent; border: 0; }
.app-card-title-group { min-width: 0; }
.app-card-category { display: block; color: var(--home-muted); font-size: 12px; line-height: 1.6; margin-bottom: 3px; }
.home-library .card-title { display: block; font: 600 18px/1.45 Pretendard, sans-serif; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.app-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.app-card-badges:empty { display: none; }
.home-library .new-badge, .home-library .hot-badge, .home-library .status-badge { position: static; font: 500 12px/1.6 Pretendard, sans-serif; padding: 1px 6px; border: 0; border-radius: 3px; box-shadow: none; }
.home-library .new-badge { background: #e8f3df; color: #346827; }
.home-library .hot-badge { background: #fff0dd; color: #854800; }
.app-card-description { margin: 12px 0 16px; color: var(--home-muted); font-size: 15px; line-height: 1.65; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 50px; }
.app-card-actions { display: flex; gap: 8px; margin-top: auto; }
.home-library .enter-btn { display: flex; justify-content: center; align-items: center; gap: 10px; flex: 1; padding: 10px; min-height: 46px; background: #326caa; color: #fff; border: 1px solid #1d4978; box-shadow: none; border-radius: 4px; font: 600 16px/1.5 Pretendard, sans-serif; text-decoration: none; }
.home-library .enter-btn:hover { background: #255b93; transform: none; }
.home-library .qr-btn { display: inline-flex; justify-content: center; align-items: center; gap: 4px; padding: 10px; min-height: 46px; background: var(--home-soft); color: var(--text); border: 1px solid var(--home-line); box-shadow: none; border-radius: 4px; font: 400 14px/1.5 Pretendard, sans-serif; cursor: pointer; }
.home-library .qr-btn .home-icon { width: 18px; height: 18px; }
.home-library .card-detail-toggle { grid-column: 1; grid-row: 2; width: 100%; padding: 10px 12px; min-height: 44px; font: 400 14px/1.5 Pretendard, sans-serif; background: var(--home-soft); color: var(--home-blue); border: 0; border-top: 1px solid var(--home-line); text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; }
.home-library .favorite-btn { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 8px; min-height: 44px; font-size: 14px; background: var(--home-soft); color: var(--home-muted); border: 0; border-top: 1px solid var(--home-line); border-left: 1px solid var(--home-line); cursor: pointer; }
.favorite-btn .home-icon { width: 17px; height: 17px; }
.home-library .favorite-btn.is-saved { background: var(--yellow); color: #1a1000; }
.card-community { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; padding: 0 12px; border-top: 1px solid var(--home-line); }
.home-library .comment-toggle-bar { display: flex; gap: 8px; padding: 8px 0; min-height: 40px; border: 0; background: transparent; color: var(--home-muted); font: 400 13px/1.5 Pretendard, sans-serif; }
.home-library .comment-count { color: var(--home-blue); }
.home-library .like-btn { position: static; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px; border: 0; box-shadow: none; background: transparent; color: var(--home-muted); font: 400 14px/1.5 Pretendard, sans-serif; }
.home-library .like-btn.liked { color: #b33349; }
.home-library .card-comments-panel, .home-library .card-detail-panel { grid-column: 1 / -1; border-top: 1px solid var(--home-line); }
.home-library .card-detail-panel { grid-row: 4; }
.app-technical-info { font-size: 14px; color: var(--home-muted); margin: 12px 0; }
.home-library #grid.list-mode { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.home-library #grid.list-mode .card-wrap { width: 100%; max-width: none; }
.home-library #grid.list-mode .app-card-description { -webkit-line-clamp: unset; min-height: 0; }
.home-library #grid.list-mode .app-card-actions { max-width: 340px; }
.home-library .skeleton-card { border: 2px solid var(--border); border-radius: 5px; box-shadow: 2px 2px 0 var(--border); }
.home-empty { font-size: 15px; line-height: 1.8; color: var(--home-muted); padding: 20px 8px; }
.home-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 2px 0; font-size: 13px; }
.home-footer-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.home-footer-links a { text-decoration: none; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 10000; padding: 12px 18px; background: var(--yellow); color: #1a1000; border: 2px solid #1a1000; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #3875b7; outline-offset: 3px; }
.detail-modal-box, .qr-modal-box { font-family: Pretendard, sans-serif; }
.detail-modal-box .card-cat { font: 400 13px/1.5 Pretendard, sans-serif; }
.detail-modal-box .card-title { font: 600 22px/1.5 Pretendard, sans-serif; }
.detail-modal-box .card-desc, .detail-modal-box .use-case-line { font-size: 16px; line-height: 1.8; }
.detail-modal-actions .qr-btn, .detail-modal-actions .enter-btn { font-family: Pretendard, sans-serif; font-size: 15px; min-height: 44px; }
.detail-modal-box .bar-label, .detail-modal-box .bar-url, .detail-modal-box .updated-date, .card-detail-panel .bar-label, .card-detail-panel .bar-url, .card-detail-panel .updated-date { font: 400 14px/1.7 Pretendard, sans-serif; }
.detail-modal-box .cv-label, .card-detail-panel .cv-label { font: 400 13px/1.5 Pretendard, sans-serif; color: var(--home-muted); }
.detail-modal-box .cv-num, .card-detail-panel .cv-num { font: 600 22px/1.5 Pretendard, sans-serif; }
.detail-modal-close { min-width: 44px; min-height: 44px; }
#qr-title, #install-title { font: 600 18px/1.6 Pretendard, sans-serif; }
#qr-close, #install-close { font: 500 15px/1.5 Pretendard, sans-serif; min-height: 44px; }
:root[data-theme="dark"] .home-nav .home-icon, :root[data-theme="dark"] .home-section-heading .home-icon, :root[data-theme="dark"] .qr-btn .home-icon { stroke: #ede2c4; }
:root[data-theme="dark"] .app-card-icon { background: #203247; border-color: #50647a; }
@media (max-width: 1200px) { .home-library #grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .home-tagline { display: none; } }
@media (max-width: 900px) {
  .home-wrap { padding: 16px; }
  .home-layout { grid-template-columns: 1fr; gap: 16px; }
  .home-profile { display: block; padding: 8px; }
  .home-profile-summary, .home-maker-link { display: none; }
  .home-top-actions a { min-height: 48px; background: var(--yellow); color: #1a1000; border: 2px solid var(--border); font-weight: 600; }
  .home-nav { grid-column: 1 / -1; display: flex; flex-direction: row; gap: 6px; overflow-x: auto; padding: 2px; }
  .home-nav a, .home-nav button { width: auto; flex-shrink: 0; font-size: 14px; padding: 9px 12px; min-height: 44px; }
  .home-nav .nav-arrow { display: none; }
  .home-nav .home-icon { width: 18px; height: 18px; }
  .home-profile-message, .home-visitors, .home-feedback-link { display: none; }
  .home-library .tabs, .home-library .collection-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px; }
  .home-library .tab-btn, .home-library .collection-chip { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 600px) {
  .home-wrap { padding: 12px 10px 24px; }
  .home-topbar { padding: 10px; gap: 8px; }
  .home-brand { gap: 6px; }
  .home-brand img { width: 36px; height: 40px; }
  .home-brand strong { font-size: 22px; }
  .home-brand span { font-size: 12px; }
  .home-top-actions { gap: 4px; }
  .home-top-actions a { font-size: 14px; padding: 8px; }
  .home-top-actions button { font-size: 16px; padding: 8px; min-width: 44px; min-height: 48px; }
  .home-top-actions button span { display: none; }
  .home-news { margin: 12px 0; padding: 10px 12px 12px; }
  #notices-panel.home-news { margin-bottom: 12px; }
  .home-section-heading h2 { font-size: 16px; gap: 6px; }
  .home-section-heading .home-icon { width: 20px; height: 20px; }
  .home-text-button { font-size: 13px; padding: 6px 2px; }
  .home-news #notice-box { padding: 10px; gap: 8px; }
  .home-news #notice-text { font-size: 15px; }
  .home-news .notice-badge { font-size: 11px; padding: 1px 5px; }
  .home-news .notices-list { grid-template-columns: 1fr; gap: 7px; }
  .home-news .notice-row-text { font-size: 13px; }
  .notice-update-label { display: none; }
  .home-nav a, .home-nav button { gap: 6px; padding: 9px 10px; }
  .home-library { padding: 16px 12px; }
  .library-heading { margin-bottom: 14px; }
  .library-heading h1 { font-size: 23px; }
  .home-section-caption { font-size: 13px; }
  .library-heading img { width: 44px; height: 44px; }
  .home-library #search-input { font-size: 16px; padding: 12px; }
  .home-library .tabs { flex-wrap: nowrap; overflow-x: auto; padding: 2px; gap: 6px; margin-bottom: 12px; }
  .home-library .tab-btn { flex-shrink: 0; padding: 9px 10px; font-size: 14px; }
  .home-library .toolbar-row { gap: 6px; }
  .home-library .sort-select, .home-library .view-toggle-btn { font-size: 13px; padding: 9px 8px; }
  .home-library #grid { grid-template-columns: 1fr; gap: 14px; }
  .home-library .card-title { font-size: 19px; }
  .app-card-description { -webkit-line-clamp: 3; min-height: 0; }
  .home-footer { font-size: 12px; padding-top: 20px; }
}
@media (max-width: 350px) { .home-brand strong { font-size: 20px; } .home-brand img { width: 30px; } .home-library .view-toggle-btn { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .home-wrap *, .home-wrap *::before, .home-wrap *::after { animation: none !important; transition: none !important; } }

/* 이번 주 인기 TOP 3 */
.weekly-top { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--home-line); border-radius: 6px; background: var(--home-soft); }
.weekly-top h2 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.weekly-top ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.weekly-top-item { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; cursor: pointer; color: var(--text); background: var(--white); border: 2px solid var(--border); border-radius: 4px; box-shadow: 2px 2px 0 var(--border); font: inherit; }
.weekly-top-item:hover, .weekly-top-item:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--border); }
.weekly-top-rank { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: #1a1000; font-weight: 700; font-size: 14px; }
.weekly-top-icon { font-size: 22px; flex: 0 0 auto; }
.weekly-top-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.weekly-top-text strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-top-text small { font-size: 13px; color: var(--home-muted); }
@media (max-width: 760px) { .weekly-top ol { grid-template-columns: 1fr; gap: 8px; } }

/* 이메일 새 소식 신청 */
.home-email-callout{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0;padding:18px 20px;background:#fff3bd;color:#1a1000}.home-email-callout h2{font-size:19px;line-height:1.5;font-weight:600}.home-email-callout p{margin-top:4px;font-size:14px;color:#655024}.home-email-callout a{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:48px;padding:12px 18px;background:#315548;color:#fff;text-decoration:none;font-size:16px;font-weight:600;border:2px solid #1a392e;border-radius:5px;box-shadow:2px 2px 0 #1a392e}.home-email-callout a:hover{background:#244436}.home-email-callout a:focus-visible{outline:3px solid #255f9e;outline-offset:4px}@media(max-width:600px){.home-email-callout{flex-direction:column;align-items:stretch;margin:12px 0;padding:16px 14px;gap:12px}.home-email-callout h2{font-size:18px}.home-email-callout a{width:100%}}