@charset "utf-8";
/* ==========================================================================
   더포커 — 화면 채우기 · 효과 (2026-11-03)
   - 메인 히어로 그림·숫자, 뉴스·대회·선수·홀덤펍 그림 칸, "더포커 둘러보기"
   - 효과: 배경 빛, 스크롤 등장, 카드 들림, 버튼 빛 지나가기, 카드 나눠 주기, 숫자 올라가기
   - 움직임 줄이기 설정을 켠 사용자는 효과를 끔
   ========================================================================== */

/* ---------- 배경 빛 ---------- */
body.tp { background-color: var(--bg); background-image:
    radial-gradient(900px 600px at 8% -10%, rgba(31, 122, 85, .16), transparent 60%),
    radial-gradient(800px 600px at 100% 30%, rgba(201, 165, 93, .07), transparent 60%),
    radial-gradient(700px 500px at 40% 110%, rgba(31, 122, 85, .10), transparent 60%);
    background-attachment: fixed; }

/* ---------- 메인 히어로 ---------- */
.tp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: center; }
.tp-hero__title em { background: linear-gradient(100deg, #86d9b2 0%, #c9f2dd 35%, #e2c688 50%, #86d9b2 65%, #86d9b2 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-shine 6s ease-in-out infinite; }
.tp-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 640px; }
.tp-hero__stats li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(23, 28, 32, .7); }
.tp-hero__stats b { display: block; font-size: 22px; font-weight: 800; color: var(--gold-ink); line-height: 1.2; }
.tp-hero__stats span { font-size: 12px; color: var(--muted); }
.tp-hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tp-hero__art { position: relative; height: 300px; perspective: 900px; }
.hx-table { position: absolute; inset: 28px 6px 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    border-radius: 999px; border: 10px solid #2b2016; background: radial-gradient(ellipse at 50% 30%, #23855c 0%, #155a3f 48%, #0d3626 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), inset 0 10px 40px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px #4a3826; transform: rotateX(14deg); }
.hx-board .pc { animation: fx-deal .7s cubic-bezier(.2, .8, .2, 1) both; }
.hx-board .pc:nth-child(1) { animation-delay: .2s; } .hx-board .pc:nth-child(2) { animation-delay: .35s; } .hx-board .pc:nth-child(3) { animation-delay: .5s; }
.hx-board .pc:nth-child(4) { animation-delay: .8s; } .hx-board .pc:nth-child(5) { animation-delay: 1.1s; }
.hx-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .75); animation: fx-fade 1s 1.4s both; }
.hx-hand { position: absolute; right: 8%; bottom: 0; transform: rotate(-8deg); animation: fx-float 5s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.hx-hand .pc:first-child { transform: rotate(-6deg) translateX(6px); } .hx-hand .pc:last-child { transform: rotate(7deg) translateX(-6px); }
.hx-chips { position: absolute; left: 9%; bottom: 18%; display: flex; flex-direction: column-reverse; }
.hx-chips span { width: 42px; height: 10px; margin-top: -4px; border-radius: 50%; background: #c9a55d; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px #e2c688 inset; animation: fx-chip .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.hx-chips span:nth-child(2n) { background: #b8423a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px #e98c84 inset; }
.hx-chips span:nth-child(1) { animation-delay: 1.3s; } .hx-chips span:nth-child(2) { animation-delay: 1.4s; } .hx-chips span:nth-child(3) { animation-delay: 1.5s; } .hx-chips span:nth-child(4) { animation-delay: 1.6s; } .hx-chips span:nth-child(5) { animation-delay: 1.7s; }
.hx-suit { position: absolute; font-size: 42px; line-height: 1; opacity: .16; font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif; animation: fx-float 7s ease-in-out infinite; pointer-events: none; }
.hx-suit--1 { left: 2%; top: 0; color: #e9e6de; } .hx-suit--2 { right: 4%; top: 2%; color: #e5534b; animation-delay: -2s; font-size: 34px; }
.hx-suit--3 { left: 40%; top: -6px; color: #e5534b; animation-delay: -4s; font-size: 26px; } .hx-suit--4 { left: 0; bottom: 6%; color: #e9e6de; animation-delay: -3s; font-size: 30px; }

/* ---------- 오늘의 퀴즈 판: 프리플랍 보드 뒷면 ---------- */
.qz-felt__row--pre .pc--back { opacity: .55; }
.qz-felt__pre { margin-left: 8px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .55); letter-spacing: .06em; }
.qz-felt .pc { animation: fx-deal .6s cubic-bezier(.2, .8, .2, 1) both; }
.qz-felt .pc-row .pc:nth-child(2) { animation-delay: .08s; } .qz-felt .pc-row .pc:nth-child(3) { animation-delay: .16s; }
.qz-felt .pc-row .pc:nth-child(4) { animation-delay: .24s; } .qz-felt .pc-row .pc:nth-child(5) { animation-delay: .32s; }

/* ---------- 최근 핸드 복기 채움(게임스터디 인기 강좌) ---------- */
.tp-reviews--edu { margin-top: 10px; }
.tp-reviews__thumb { flex: 0 0 auto; width: 64px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--surface2); display: flex; align-items: center; justify-content: center; }
.tp-reviews__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 그림 칸 (뉴스·대회·선수·홀덤펍) ---------- */
.tp-sec__links { display: flex; gap: 12px; } .tp-sec__links a { font-size: 13px; color: var(--muted) !important; }
.tp-thumbs { display: grid; gap: 14px; }
.tp-thumbs--news { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-thumbs--poster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tp-thumbs--player { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tp-thumbs--pub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-thumb { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text) !important; }
.tp-thumb__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface2); }
.tp-thumbs--poster .tp-thumb__img, .tp-thumbs--pub .tp-thumb__img { aspect-ratio: 4 / 3; }
.tp-thumbs--player .tp-thumb__img { aspect-ratio: 3 / 4; }
.tp-thumb__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tp-thumb__img i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal; font-size: 18px; font-weight: 800; letter-spacing: .08em; color: var(--gold-ink); background: var(--gold-bg); text-align: center; padding: 8px; }
.tp-thumb__badge { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(10, 12, 14, .82); border: 1px solid var(--line2); font-size: 11px; color: var(--gold-ink); }
.tp-thumb strong { padding: 0 12px; font-size: 14px; font-weight: 700; line-height: 1.45; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-thumb em { padding: 0 12px; font-style: normal; font-size: 12px; color: var(--dim); }
.tp-thumbs--player .tp-thumb em { color: var(--gold); }
.tp-thumb__txt { padding: 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tp-thumb:hover .tp-thumb__img img { transform: scale(1.06); }
/* 메인 뉴스: 첫 기사 크게 + 나머지 세 줄 */
.tp-thumbs--lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: auto; }
.tp-thumbs--lead .tp-thumb--lead { grid-row: 1 / span 3; }
.tp-thumbs--lead .tp-thumb--lead strong { font-size: 19px; }
.tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; padding: 0; }
.tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) .tp-thumb__img { grid-row: 1 / span 2; height: 100%; aspect-ratio: auto; min-height: 92px; }
.tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) strong { padding: 12px 12px 0 0; }
.tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) em { padding: 0 12px 12px 0; align-self: end; }
.tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) { grid-template-rows: auto auto 1fr; }
.tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) .tp-thumb__img { grid-row: 1 / span 3; }
.tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) .tp-thumb__txt { padding: 0 12px 0 0; -webkit-line-clamp: 2; font-size: 12.5px; }

/* ---------- 더포커 둘러보기 (짧은 화면 아래) ---------- */
.tp-discover { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.tp-faces { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tp-faces__t { font-size: 13px; font-weight: 700; color: var(--gold); margin-right: 4px; }
.tp-face { display: flex; align-items: center; gap: 8px; color: var(--text) !important; font-size: 14px; }
.tp-face__img { width: 40px; height: 40px; overflow: hidden; border-radius: 50%; border: 2px solid var(--line2); background: var(--gold-bg); display: flex; align-items: center; justify-content: center; transition: border-color .2s, transform .2s; }
.tp-face__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tp-face__img i { font-style: normal; font-weight: 800; color: var(--gold-ink); }
.tp-face:hover .tp-face__img { border-color: var(--gold); transform: scale(1.08); }

/* ---------- 효과: 머리글 · 메뉴 · 로고 ---------- */
.tp-hd { transition: background .3s, box-shadow .3s; }
.tp-hd.is-scrolled { background: rgba(10, 12, 14, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.tp-nav__link { position: relative; }
.tp-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--felt2), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.tp-nav__item:hover > .tp-nav__link::after { transform: scaleX(1); }
.tp-logo { position: relative; }
.tp-logo__img { transition: filter .3s, transform .3s; }
.tp-logo:hover .tp-logo__img { filter: drop-shadow(0 0 10px rgba(226, 198, 136, .45)); transform: scale(1.03); }

/* ---------- 효과: 카드 들림 · 빛 ---------- */
.tp-card, .tp-tool, .tp-course a, .tp-latest__box, .tp-reviews a, .tp-thumb, .tp-rbox, #bo_gall .tpc-item, #bo_list .tpm-item--lead .tpm-thumb { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s; }
.tp-tool:hover, .tp-course a:hover, .tp-reviews a:hover, .tp-thumb:hover, .tp-latest__box:hover { transform: translateY(-4px); border-color: rgba(201, 165, 93, .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 165, 93, .12); }
#bo_gall .tpc-item:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); border-color: rgba(201, 165, 93, .45); }
.tp-quizcard { position: relative; overflow: hidden; }
.tp-quizcard::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(42, 157, 111, .6), rgba(201, 165, 93, .5), rgba(42, 157, 111, .1), rgba(42, 157, 111, .6)); background-size: 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fx-border 8s linear infinite; pointer-events: none; }
.tp-dot { animation: fx-pulse 2s ease-out infinite; }
/* 버튼에 빛 지나가기 */
.tp-btn--felt { position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(31, 122, 85, .35); }
.tp-btn--felt::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.tp-btn--felt:hover::after { left: 130%; }
.tp-btn--felt:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31, 122, 85, .5); }
.tp-hero__cta .tp-btn--felt { animation: fx-glow 2.6s ease-in-out infinite; }
/* 섹션 제목 앞 금색 막대 */
.tp-sec__hd h2 { position: relative; padding-left: 12px; }
.tp-sec__hd h2::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: linear-gradient(var(--gold), var(--felt2)); }

/* ---------- 효과: 스크롤 등장 ---------- */
.fx-js .fx-reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-reveal.is-in { opacity: 1; transform: none; }

@keyframes fx-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes fx-deal { from { opacity: 0; transform: translateY(-26px) rotateY(90deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes fx-chip { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes fx-pulse { 0% { box-shadow: 0 0 0 0 rgba(42, 157, 111, .55); } 100% { box-shadow: 0 0 0 10px rgba(42, 157, 111, 0); } }
@keyframes fx-border { to { background-position: 300% 0; } }
@keyframes fx-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(31, 122, 85, .35); } 50% { box-shadow: 0 6px 28px rgba(42, 157, 111, .65); } }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1100px) {
    .tp-thumbs--poster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tp-thumbs--player { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tp-thumbs--news, .tp-thumbs--pub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-thumbs--lead { grid-template-columns: minmax(0, 1fr); }
    .tp-thumbs--lead .tp-thumb--lead { grid-row: auto; }
}
@media (max-width: 900px) {
    .tp-hero { grid-template-columns: minmax(0, 1fr); }
    .tp-hero__art { height: 220px; }
    .tp-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tp-hero__art { display: none; }
    .tp-thumbs--poster, .tp-thumbs--player { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-thumbs--lead .tp-thumb:not(.tp-thumb--lead) { grid-template-columns: 110px minmax(0, 1fr); }
    .tp-hero__stats b { font-size: 18px; }
    body.tp { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .fx-js .fx-reveal { opacity: 1; transform: none; }
}

/* ---------- 사이드바 아래 묶음 따라 내려오기 (넓은 화면) ---------- */
@media (min-width: 1281px) {
    .tp-wrap--rail > .tp-rail--r { align-self: stretch; }
    .tp-rail__sticky { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 14px; }
    .tp-rail__sticky .tp-chat__list { height: 230px; }
}

/* 퀴즈: 손님용 선택지 미리 보기 */
.qz-opt--guest { color: var(--text) !important; }
.qz-opt--guest:hover { border-color: var(--felt2); background: var(--felt-bg); }
.qz-opt { transition: border-color .2s, background .2s, transform .2s; }
.qz-opt:hover { transform: translateX(4px); }
/* 팟 오즈·아웃 확률표: 긴 표 옆 설명 칸이 따라 내려오게 */
@media (min-width: 1400px) { .tp-page--duo > .tp-card:last-of-type { position: sticky; top: 86px; } }

/* ---------- 글 보기: 본문은 넓게, 같은 게시판 다른 글은 아래 줄 (2열 유지) ---------- */
body.tp-s-bbs #container.tp-container--view > #bo_v, body.tp-s-bbs #container.tp-container--view > #bo_vc, body.tp-s-bbs #container.tp-container--view > .bo_vc_w, body.tp-s-bbs #container.tp-container--view > .cmt_btn { max-width: none; }
body.tp .tp-container--view #bo_v_con { max-width: 52em; }
.tp-vside { margin-top: 36px; }
.tp-vside__in { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tp-vside ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-vside li a { display: flex; flex-direction: column; gap: 8px; color: var(--text) !important; }
.tp-vside__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: var(--gold-bg); display: flex; align-items: center; justify-content: center; }
.tp-vside__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tp-vside__img i { font-style: normal; color: rgba(226, 198, 136, .5); font-size: 26px; }
.tp-vside li a:hover .tp-vside__img img { transform: scale(1.06); }
.tp-vside li a:hover strong { color: var(--felt-ink); }
.tp-vside__txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.45; }
.tp-vside__txt em { font-style: normal; font-size: 11px; color: var(--dim); }
@media (max-width: 1100px) { .tp-vside ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 옛 글에 남은 흰 배경·검은 글자 (다른 사이트에서 옮겨 온 서식) 지우기 */
body.tp #bo_v_con [style*="background"] { background: transparent !important; }
body.tp #bo_v_con [style*="color"]:not(a) { color: inherit !important; }
body.tp #bo_v_con table, body.tp #bo_v_con td, body.tp #bo_v_con th { border-color: var(--line2) !important; }
/* 놀이터 안내: 넓은 화면에서 두 단 */
@media (min-width: 1281px) {
    body.tp-s-play .tp-page > .tp-prose { max-width: none; }
    body.tp-s-play .tp-page > .tp-prose ul { columns: 2; column-gap: 40px; }
    body.tp-s-play .tp-page > .tp-prose li { break-inside: avoid; }
}
/* 선수 소개 글은 본문 폭 제한 없이 */
body.tp .tp-container--view #bo_v_con:has(.tp-pl) { max-width: none; }

/* SEO: 제목 태그를 h1 로 바꾼 곳의 모양 유지 */
body.tp h1#bo_v_title { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
body.tp h1#container_title { margin: 0 0 20px; }
.tp-page__hd p.tp-page__h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.25; color: var(--text); }
@media (max-width: 640px) { .tp-page__hd p.tp-page__h1 { font-size: 25px; } }

/* 메인: 검색어 줄(h1 안) · 자주 묻는 질문 */
.tp-hero__kw { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--gold); -webkit-text-fill-color: var(--gold); }
.tp-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tp-faq__item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0; transition: border-color .2s; }
.tp-faq__item[open] { border-color: rgba(201, 165, 93, .45); }
.tp-faq__item summary { cursor: pointer; list-style: none; padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--text); position: relative; padding-right: 40px; }
.tp-faq__item summary::-webkit-details-marker { display: none; }
.tp-faq__item summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 20px; color: var(--gold); transition: transform .2s; }
.tp-faq__item[open] summary::after { transform: rotate(45deg); }
.tp-faq__a { padding: 0 18px 16px; font-size: 14px; line-height: 1.75; color: #cfd3d1; }
.tp-faq__a a { color: var(--felt-ink) !important; text-decoration: underline; }
@media (max-width: 900px) { .tp-faq__list { grid-template-columns: minmax(0, 1fr); } }