.ttg-wrap{--ttg-accent:#f06432;--ttg-text:#171717;--ttg-muted:#777;max-width:1480px;margin:0 auto;padding:14px 14px 56px;color:var(--ttg-text);font-family:inherit}.ttg-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:4px 0 18px}.ttg-heading h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.04em;margin:0;font-weight:850}.ttg-heading p{margin:6px 0 0;color:var(--ttg-muted)}.ttg-count{display:flex;align-items:baseline;gap:5px;color:#888}.ttg-count strong{font-size:22px;color:#222}.ttg-count span{font-size:12px}.ttg-toolbar{position:sticky;top:8px;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);padding:6px 0 10px;margin-bottom:10px}.ttg-tabs,.ttg-type-tabs{display:flex;gap:6px}.ttg-tabs{background:#f4f4f4;padding:5px;border-radius:15px}.ttg-tabs button{flex:1}.ttg-tabs button,.ttg-type-tabs button{border:0;border-radius:11px;padding:10px 14px;background:transparent;font-weight:750;cursor:pointer;white-space:nowrap}.ttg-tabs button.is-active{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);color:var(--ttg-accent)}.ttg-type-tabs{margin-top:8px;overflow:auto;scrollbar-width:none}.ttg-type-tabs::-webkit-scrollbar{display:none}.ttg-type-tabs button{background:#f6f6f6;color:#666;padding:8px 13px;font-size:13px}.ttg-type-tabs button.is-active{background:#222;color:#fff}
/* 0.3: CSS columns 대신 실제 grid + JS masonry span */
.ttg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:8px;gap:16px;align-items:start}.ttg-card{margin:0;border-radius:15px;background:#fff;overflow:hidden;border:1px solid #ececec;box-shadow:0 2px 10px rgba(0,0,0,.035);cursor:pointer;transition:.18s transform,.18s box-shadow;outline:none;min-width:0}.ttg-card:hover,.ttg-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.11)}.ttg-card[hidden]{display:none}.ttg-media{position:relative;background:#f0f0f0;overflow:hidden}.ttg-media img{display:block;width:100%;height:auto;transition:transform .25s ease}.ttg-media.is-capped{aspect-ratio:1/1.65}.ttg-media.is-capped img{width:100%;height:100%;object-fit:cover;object-position:center top}.ttg-card:hover .ttg-media img{transform:scale(1.015)}.ttg-placeholder{aspect-ratio:4/5;display:grid;place-items:center;color:#aaa}.ttg-badge{position:absolute;right:8px;top:8px;background:rgba(20,20,20,.82);color:#fff;border-radius:8px;padding:5px 8px;font-size:11px;font-weight:850;box-shadow:0 2px 7px rgba(0,0,0,.18)}.ttg-video{background:rgba(240,80,45,.94)}.ttg-hover{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:12px;background:linear-gradient(transparent 60%,rgba(0,0,0,.42));opacity:0;transition:opacity .18s}.ttg-hover span{color:#fff;font-size:12px;font-weight:800}.ttg-card:hover .ttg-hover{opacity:1}.ttg-card-body{padding:10px 11px 12px}.ttg-card h3{font-size:15px;line-height:1.38;margin:0 0 8px;letter-spacing:-.02em}.ttg-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:#777}.ttg-empty,.ttg-error,.ttg-no-results{text-align:center;padding:42px;color:#888}.ttg-modal[hidden]{display:none}.ttg-modal{position:fixed;inset:0;z-index:999999}.ttg-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}.ttg-dialog{position:relative;z-index:1;width:min(1040px,94vw);max-height:92vh;margin:4vh auto;background:#111;color:#fff;border-radius:18px;overflow:auto;box-shadow:0 25px 80px rgba(0,0,0,.58)}.ttg-close{position:absolute;right:12px;top:10px;z-index:5;width:42px;height:42px;border:0;border-radius:50%;font-size:30px;line-height:1;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}.ttg-stage{min-height:320px;background:#050505;display:grid;place-items:center;position:relative}.ttg-stage img,.ttg-stage video{display:block;max-width:100%;max-height:72vh;margin:auto}.ttg-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.58);color:#fff;width:46px;height:58px;border-radius:10px;font-size:28px;cursor:pointer}.ttg-prev{left:10px}.ttg-next{right:10px}.ttg-detail{padding:18px 20px 22px}.ttg-counter{color:#aaa;font-size:13px;margin-bottom:5px}.ttg-detail h2{margin:0 0 8px;font-size:24px}.ttg-detail-meta{color:#aaa;font-size:13px;margin-bottom:10px}.ttg-detail p{color:#ddd}.ttg-actions{display:flex;gap:8px;margin-top:14px}.ttg-actions button{border:1px solid #333;border-radius:10px;padding:10px 16px;background:#1c1c1c;color:#888}.ttg-actions button:first-child{border-color:#493127}body.ttg-lock{overflow:hidden}@media(max-width:1050px){.ttg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}@media(max-width:720px){.ttg-wrap{padding:8px 8px 40px}.ttg-header{margin-bottom:10px}.ttg-heading h2{font-size:31px}.ttg-count{display:none}.ttg-toolbar{top:0;margin-left:-2px;margin-right:-2px}.ttg-tabs{gap:3px;padding:4px}.ttg-tabs button{padding:9px 4px;font-size:13px}.ttg-type-tabs{margin-top:6px}.ttg-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:6px;gap:8px}.ttg-card{border-radius:11px}.ttg-card-body{padding:8px}.ttg-card h3{font-size:13px}.ttg-meta{gap:7px;font-size:10px}.ttg-hover{display:none}.ttg-badge{right:6px;top:6px;font-size:10px;padding:4px 6px}.ttg-dialog{width:100vw;max-height:100vh;height:100vh;margin:0;border-radius:0}.ttg-stage{min-height:55vh}.ttg-detail{padding:14px 16px 24px}.ttg-detail h2{font-size:20px}}
/* 0.4: 실제 서버 정렬 + KBoard 추천 연동 */
.ttg-loading{margin-top:7px;font-size:12px;color:#888;padding-left:5px}.ttg-wrap.is-loading .ttg-grid{opacity:.48;pointer-events:none;transition:opacity .15s}.ttg-like-button{color:#fff!important;border-color:#563128!important;cursor:pointer!important}.ttg-like-button:hover{background:#2b211e!important}.ttg-like-button.is-busy{opacity:.55;cursor:wait!important}.ttg-like-button.is-done{color:#ff7652!important;border-color:#754331!important}.ttg-action-message{min-height:20px!important;margin:7px 0 0!important;color:#ff8b6c!important;font-size:12px!important}.ttg-meta b{font:inherit;font-weight:inherit}

/* 0.4.1: 정렬 탭 대비 개선 */
.ttg-tabs button{color:#4a4a4a!important;background:transparent!important;opacity:1!important;text-shadow:none!important}
.ttg-tabs button:hover{color:#222!important;background:#ededed!important}
.ttg-tabs button.is-active{color:var(--ttg-accent)!important;background:#fff!important;box-shadow:0 2px 10px rgba(0,0,0,.10)!important}

/* 0.5: 고정 카드 + 브라우저 보관함 */
.ttg-pin-badge{position:absolute;left:8px;top:8px;z-index:2;background:rgba(255,255,255,.94);color:#222;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:5px 8px;font-size:10px;font-weight:850;box-shadow:0 2px 8px rgba(0,0,0,.14);max-width:68%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttg-card.is-pinned{border-color:#f4c7b6;box-shadow:0 3px 14px rgba(240,100,50,.09)}
.ttg-card.is-pinned .ttg-card-body{background:linear-gradient(180deg,#fff 0%,#fffaf7 100%)}
.ttg-type-tabs [data-saved-view]{margin-left:auto;background:#fff7f2;color:#a54d2e;border:1px solid #f4ddd3}
.ttg-type-tabs [data-saved-view].is-active{background:#222;color:#fff;border-color:#222}
.ttg-type-tabs [data-saved-count]{display:inline-block;min-width:16px;padding:0 4px;border-radius:999px;background:rgba(0,0,0,.08);font-size:10px;line-height:16px;text-align:center}
.ttg-type-tabs [data-saved-view].is-active [data-saved-count]{background:rgba(255,255,255,.16)}
.ttg-bookmark-button{cursor:pointer!important;color:#fff!important}
.ttg-bookmark-button:hover{background:#292929!important}
.ttg-bookmark-button.is-saved{color:#ffb08f!important;border-color:#754331!important;background:#2b211e!important}
@media(max-width:720px){.ttg-pin-badge{left:6px;top:6px;font-size:9px;padding:4px 6px}.ttg-type-tabs [data-saved-view]{margin-left:0}}

/* 0.5.1: 고정 광고 카드 전체 외부 링크 */
.ttg-card.is-pinned[data-pin-url]:not([data-pin-url=""]){cursor:pointer}
.ttg-card.is-pinned[data-pin-url]:not([data-pin-url=""]) .ttg-hover{background:linear-gradient(transparent 55%,rgba(0,0,0,.55))}
.ttg-card.is-pinned[data-pin-url]:not([data-pin-url=""]) .ttg-hover span{background:rgba(0,0,0,.58);padding:5px 9px;border-radius:999px}

/* 0.7: 상세 뷰어 관련 콘텐츠 */
.ttg-related{margin-top:22px;padding-top:18px;border-top:1px solid #282828}.ttg-related-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.ttg-related-head h3{margin:0;color:#fff;font-size:18px;letter-spacing:-.02em}.ttg-related-head span{color:#888;font-size:11px}.ttg-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ttg-related-card{appearance:none;border:1px solid #2b2b2b;background:#171717;color:#fff;border-radius:12px;overflow:hidden;padding:0;text-align:left;cursor:pointer;min-width:0;transition:transform .16s ease,border-color .16s ease,background .16s ease}.ttg-related-card:hover,.ttg-related-card:focus-visible{transform:translateY(-2px);border-color:#5b4137;background:#1d1b1a;outline:none}.ttg-related-media{position:relative;display:block;aspect-ratio:4/5;background:#0a0a0a;overflow:hidden}.ttg-related-media img{display:block;width:100%;height:100%;object-fit:cover}.ttg-related-badge{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.72);padding:4px 6px;border-radius:7px;font-size:10px;font-weight:800}.ttg-related-text{display:block;padding:8px 9px 10px;font-size:12px;font-weight:750;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:720px){.ttg-related{margin-top:18px;padding-top:15px}.ttg-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ttg-related-head h3{font-size:16px}.ttg-related-text{font-size:11px}}


/* 0.8: 게시물 연속 탐색 - PC 이전/다음 + 모바일 스와이프 */
/* 0.8.1: image-only swipe UX */
.ttg-stage{overflow:hidden}
.ttg-stage>img{will-change:transform,opacity;user-select:none;-webkit-user-drag:none}
.ttg-slide-enter{transition:none!important}
.ttg-slide-enter.is-from-right{transform:translate3d(100%,0,0);opacity:.72}
.ttg-slide-enter.is-from-left{transform:translate3d(-100%,0,0);opacity:.72}
.ttg-slide-enter.is-active{transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s ease!important;transform:translate3d(0,0,0);opacity:1}
@media(max-width:720px){.ttg-stage{touch-action:pan-y}}

/* 0.9: 무한스크롤 + 단계 로딩 */
.ttg-infinite{min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px;color:#8a8a8a;font-size:12px;padding:18px 0 4px;text-align:center}
.ttg-infinite-spinner{width:18px;height:18px;border:2px solid #e7e7e7;border-top-color:var(--ttg-accent);border-radius:50%;animation:ttg-spin .72s linear infinite}
.ttg-sentinel{height:2px;width:100%;pointer-events:none}
@keyframes ttg-spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.ttg-infinite{min-height:38px;padding-top:12px}.ttg-infinite-spinner{width:16px;height:16px}}


/* 0.9.2: modal close polish + desktop video play overlay */
.ttg-close{
  appearance:none!important;-webkit-appearance:none!important;
  display:grid!important;place-items:center!important;
  right:14px!important;top:14px!important;z-index:30!important;
  width:44px!important;height:44px!important;padding:0!important;margin:0!important;
  border:1px solid rgba(255,255,255,.16)!important;border-radius:50%!important;
  background:rgba(0,0,0,.74)!important;color:#fff!important;
  box-shadow:0 4px 18px rgba(0,0,0,.3)!important;
  font:400 34px/1 Arial,sans-serif!important;text-align:center!important;
  transform:none!important;filter:none!important;cursor:pointer!important;
  outline:none!important;
}
.ttg-close:hover{background:rgba(20,20,20,.9)!important}
.ttg-close:focus,.ttg-close:active{background:rgba(0,0,0,.82)!important;color:#fff!important;transform:none!important}
.ttg-close:focus-visible{box-shadow:0 0 0 3px rgba(240,100,50,.58),0 4px 18px rgba(0,0,0,.3)!important}
.ttg-video-wrap{position:relative;display:grid;place-items:center;max-width:100%;max-height:72vh;margin:auto}
.ttg-video-wrap video{display:block;max-width:100%;max-height:72vh;margin:0}
.ttg-video-play{appearance:none;-webkit-appearance:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:78px;height:78px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.58);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 24px rgba(0,0,0,.35);transition:transform .16s ease,background .16s ease,opacity .16s ease}
.ttg-video-play span{display:block;margin-left:5px;font-size:32px;line-height:1}
.ttg-video-play:hover{background:rgba(0,0,0,.76);transform:translate(-50%,-50%) scale(1.06)}
.ttg-video-play[hidden]{display:none!important}
.ttg-video-play:focus-visible{outline:3px solid rgba(240,100,50,.72);outline-offset:3px}
@media(max-width:720px){
  .ttg-close{right:12px!important;top:12px!important;width:42px!important;height:42px!important;font-size:32px!important}
  /* Mobile browsers already expose a clear native play affordance. */
  .ttg-video-play{display:none!important}
  .ttg-video-wrap{max-height:none;width:100%}
  .ttg-video-wrap video{max-height:72vh;max-width:100%}
}


/* 0.9.3: Pinterest-style reserved thumbnail space + skeleton/fade-in */
.ttg-media{isolation:isolate}
.ttg-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;z-index:1}
.ttg-media.is-capped>img{object-position:center top}
.ttg-media.is-image-loading{background:#ececec}
.ttg-media.is-image-loading::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,#ececec 18%,#f7f7f7 36%,#ececec 54%);background-size:220% 100%;animation:ttg-skeleton 1.15s ease-in-out infinite}
.ttg-media.is-image-loading>img{opacity:0;transform:scale(1.01)}
.ttg-media.is-image-loaded>img{opacity:1;transform:scale(1);transition:opacity .24s ease,transform .32s ease}
.ttg-media.is-image-error::before{content:"이미지를 불러오지 못했습니다";position:absolute;inset:0;display:grid;place-items:center;padding:12px;color:#999;font-size:11px;text-align:center;background:#f0f0f0}
.ttg-badge,.ttg-pin-badge,.ttg-hover{z-index:3}
@keyframes ttg-skeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.ttg-media.is-image-loading::before{animation:none}.ttg-media.is-image-loaded>img{transition:none}}

/* 0.9.3.1: related-content performance UX */
.ttg-related-skeleton{pointer-events:none;transform:none!important;border-color:#252525!important;background:#151515!important}
.ttg-related-skeleton .ttg-related-media{background:#1d1d1d;overflow:hidden}
.ttg-related-skeleton .ttg-related-media::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#1d1d1d 18%,#2a2a2a 36%,#1d1d1d 54%);background-size:220% 100%;animation:ttg-related-shimmer 1.05s ease-in-out infinite}
.ttg-related-skeleton .ttg-related-text{height:34px;padding:10px 9px}
.ttg-related-skeleton .ttg-related-text i{display:block;width:68%;height:9px;border-radius:999px;background:#2a2a2a;position:relative;overflow:hidden}
.ttg-related-card:not(.ttg-related-skeleton){animation:ttg-related-in .18s ease both}
@keyframes ttg-related-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes ttg-related-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ttg-related-skeleton .ttg-related-media::before,.ttg-related-card:not(.ttg-related-skeleton){animation:none}}