@charset "utf-8";
/* ==========================================================================
   더포커 — 넓은 화면(1281px 이상) 전용 배치
   이 파일은 화면 폭이 1281px 이상일 때만 적용된다(불러올 때 media 로 제한).
   1280px 이하와 모바일은 thepoker.css 그대로다.
   - 바깥 틀(상단, 본문, 하단, 게시판 목록)은 바깥 틀 최대 1600px (2026-11-03 운영자 지시)
   - 글이 많은 화면은 한 줄이 너무 길어지지 않게 본문 폭을 따로 잡는다
   ========================================================================== */

.tp-hd__in { max-width: 1600px; padding: 0 32px; }
body.tp #container, .tp-container { max-width: 1600px; padding: 32px 32px 80px; }
.tp-ft__in { max-width: 1600px; padding: 40px 32px 48px; }
.tp-play--sub { max-width: 1600px; padding: 0 32px; }
.tp-page { max-width: none; }
.tp-page > .tp-prose, .tp-page > .tp-note { max-width: 900px; }
.tp-course--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 입문 안내 글: 왼쪽 차례 + 오른쪽 본문 ---------- */
.tp-page--guide { max-width: none; display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 32px; align-items: start; }
.tp-page--guide > * { grid-column: 2 / -1; min-width: 0; }
.tp-page--guide > .tp-card, .tp-page--guide > .gd-pager { max-width: 800px; width: 100%; }
.tp-page--guide > .tp-tabs { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 86px; flex-direction: column; gap: 2px; margin: 0; padding: 8px; overflow: visible; }
.tp-page--guide > .tp-tabs a { flex: 0 0 auto; text-align: left; white-space: normal; padding: 10px 14px; }
/* 용어 사전도 다른 안내 글과 같은 본문 폭·한 단 목록 (2026-11-03) */
.tp-page--guide > .gl { max-width: 800px; width: 100%; }
.tp-page--guide .gl__tools { top: 78px; }
.tp-page--guide .gl__item { grid-template-columns: 170px 1fr; }
/* 차례 안의 묶음 이름(입문 안내 / 공부 게시판) */
.tp-page--guide > .tp-tabs .tp-tabs__label { display: block; padding: 14px 14px 4px; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
.tp-page--guide > .tp-tabs .tp-tabs__label:first-child { padding-top: 6px; }
/* 공부 게시판: 차례 | 게시판 */
.tp-page--study > #bo_list, .tp-page--study > #bo_v, .tp-page--study > #bo_w, .tp-page--study > #bo_gall { width: 100% !important; }

/* ---------- 퀴즈 · 도구 (1400px 미만에서는 한 단) ---------- */
.tp-page--quiz, .tp-page--duo, .tp-page--eq { max-width: 860px; }

/* ---------- 게시판: 목록은 사이트 폭 그대로, 읽는 글은 읽기 좋은 폭으로 ---------- */
body.tp-s-bbs #container > #bo_v, body.tp-s-bbs #container > #bo_vc, body.tp-s-bbs #container > .bo_vc_w,
body.tp-s-bbs #container > .cmt_btn, body.tp-s-bbs #container > #bo_w { max-width: 980px; margin-left: auto; margin-right: auto; }
body.tp-s-bbs #container > .cmt_btn { display: block; }
body.tp #bo_v_con { max-width: 46em; }

/* ---------- 1400px 이상: 여러 단 ---------- */
@media (min-width: 1400px) {
    /* 메인: 도구 옆에 최근 복기 */
    .tp-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px 28px; }
    .tp-main > * { grid-column: 1 / -1; min-width: 0; }
    .tp-main > .tp-sec:nth-child(3) { grid-column: 1 / span 7; }
    .tp-main > .tp-sec:nth-child(4) { grid-column: 8 / -1; }
    .tp-main > .tp-sec:nth-child(4) .tp-reviews { grid-template-columns: 1fr; }

    .tp-course--lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tp-playlist { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .tp-playlist .tp-tool { padding: 18px; }

    /* 입문 안내: 차례 | 본문(한 줄 48자쯤) | 함께 보면 좋은 곳 */
    .tp-page--guide { grid-template-columns: 220px minmax(0, 1fr) 260px; column-gap: 28px; }
    .tp-page--guide > * { grid-column: 2; }
    .tp-page--guide > .tp-card, .tp-page--guide > .gd-pager { max-width: none; }
    .tp-page--guide > .gd-side { display: block; grid-column: 3; grid-row: 2 / span 40; position: sticky; top: 86px; }
    .gd-side .tp-card { margin: 0; padding: 18px; }
    .gd-side h2 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
    .gd-side ul { margin: 0; padding: 0; list-style: none; }
    .gd-side li a { display: block; padding: 10px 0; border-top: 1px solid var(--line); }
    .gd-side li:first-child a { border-top: 0; }
    .gd-side strong { display: block; font-size: 14px; color: var(--text); }
    .gd-side span { font-size: 12px; color: var(--muted); }
    .gd-side li a:hover strong { color: var(--felt-ink); }
    .gd-side__1336 { margin: 12px 4px 0; font-size: 12px; color: var(--dim); }
    .gd-side__1336 b { font-family: var(--mono); color: var(--gold-ink); font-size: 14px; }
    .tp-page--guide > .gl { max-width: none; }
    /* 공부 게시판은 옆 칸 없이 차례 | 게시판 */
    .tp-page--study { grid-template-columns: 220px minmax(0, 1fr); }

    /* 퀴즈: 왼쪽에 상황, 오른쪽에 선택지·해설 */
    .tp-page--quiz { max-width: none; }
    .tp-page--quiz .qz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 28px; }
    .tp-page--quiz .qz > * { grid-column: 1; min-width: 0; }
    .tp-page--quiz .qz > .qz-form, .tp-page--quiz .qz > .qz-result { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
    .tp-page--quiz .qz > .qz-after, .tp-page--quiz .qz > .qz-next { grid-column: 2; }
    .tp-page--quiz .qz > .tp-empty { grid-column: 1 / -1; }
    .tp-page--quiz .qz-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-page--quiz .tp-card--flush { max-width: 900px; }

    /* 팟 오즈 · 아웃 확률표: 계산기(표) 옆에 설명 */
    .tp-page--duo { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
    .tp-page--duo > .tp-page__hd, .tp-page--duo > .tp-tabs { grid-column: 1 / -1; }
    .tp-page--duo > .tp-card { margin-top: 0; }

    /* 승률 계산기: 입력 옆에 결과 */
    .tp-page--eq { max-width: none; }
    .tp-page--eq .eq { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
    .tp-page--eq .eq__result, .tp-page--eq .eq__intro { position: sticky; top: 86px; }
    /* 결과가 나오기 전에는 오른쪽 칸에 쓰는 법 (2026-11-03, 빈 칸으로 보이던 것) */
    .tp-page--eq .eq__intro { display: block; grid-column: 2; grid-row: 1; }
    .tp-page--eq .eq__result:not([hidden]) ~ .eq__intro { display: none; }
}

/* ==========================================================================
   PC 오른쪽 사이드바 (2026-11-03, 2열: 본문 | 오른쪽 로그인·채팅·배너·새 글)
   사이트 전체 폭은 최대 1600px
   ========================================================================== */
.tp-wrap--rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; max-width: 1600px; margin: 0 auto; padding: 0 32px; }
body.tp .tp-wrap--rail > #container { grid-column: 1; grid-row: 1; max-width: none; min-width: 0; margin: 0; padding: 32px 0 80px; }
.tp-wrap--rail > .tp-rail--r { display: flex; grid-column: 2; grid-row: 1; }
.tp-rail { flex-direction: column; gap: 14px; padding: 32px 0 80px; min-width: 0; }
.tp-rbox { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tp-rbox__t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--text); }
.tp-rbox__t a, .tp-rbox__t small { font-size: 12px; font-weight: 400; color: var(--dim); }
/* 로그인 */
.tp-rlogin__form { display: grid; gap: 8px; }
.tp-rlogin__form input[type=text], .tp-rlogin__form input[type=password] { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); color: var(--text); font-size: 14px; }
.tp-rlogin__form input:focus { outline: 0; border-color: var(--felt2); }
.tp-rlogin__auto { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tp-rlogin__form .tp-btn { width: 100%; height: 40px; justify-content: center; }
.tp-rlogin__hi { margin: 0; font-size: 15px; color: var(--muted); }
.tp-rlogin__hi b { color: var(--text); }
.tp-rlogin__pt { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; }
.tp-rlogin__pt a { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--gold-ink) !important; }
.tp-rlogin__pt span { font-size: 12px; color: var(--dim); }
.tp-rlogin__links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; }
.tp-rlogin__links a { color: var(--muted) !important; }
.tp-rlogin__links a:hover { color: var(--text) !important; }
.tp-rlogin__links a.is-gold { color: var(--gold) !important; }
/* 오늘의 퀴즈 */
.tp-rquiz { display: block; padding: 12px; border-radius: 9px; background: var(--felt-bg); border: 1px solid #1d3a2e; }
.tp-rquiz strong { display: block; font-size: 14px; line-height: 1.5; color: var(--text); word-break: keep-all; }
.tp-rquiz span { display: block; margin-top: 6px; font-size: 12px; color: var(--felt-ink); }
/* 새 글 */
.tp-rnew { margin: 0; padding: 0; list-style: none; }
.tp-rnew li a { display: block; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: #cfd3d1 !important; word-break: keep-all; }
.tp-rnew li:first-child a { border-top: 0; padding-top: 0; }
.tp-rnew li a span { display: block; font-size: 11px; color: var(--gold); }
.tp-rnew li a:hover { color: var(--text) !important; }
/* 채팅 */
.tp-rbox--chat { display: flex; flex-direction: column; }
.tp-chat__list { height: 320px; margin: 0 0 10px; padding: 8px; overflow-y: auto; list-style: none; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.tp-chat__list li { padding: 4px 2px; word-break: break-all; }
.tp-chat__list li b { color: var(--felt-ink); font-weight: 600; margin-right: 6px; }
.tp-chat__list li.is-me b { color: var(--gold-ink); }
.tp-chat__list li time { float: right; font-size: 11px; color: var(--dim); }
.tp-chat__list li span { display: block; color: #dfe2df; }
.tp-chat__empty { color: var(--dim); text-align: center; padding-top: 40px !important; }
.tp-chat__form { display: flex; gap: 6px; }
.tp-chat__form input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); color: var(--text); font-size: 13px; }
.tp-chat__form input:focus { outline: 0; border-color: var(--felt2); }
.tp-chat__form button { flex: 0 0 auto; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--felt); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.tp-chat__login { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.tp-chat__login a { color: var(--felt-ink) !important; }
.tp-chat__rule { margin: 8px 0 0; font-size: 11px; color: var(--dim); }
/* 배너 */
.tp-rbox--ad { display: grid; gap: 10px; padding: 0; border: 0; background: none; }
.tp-rad { display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); }
.tp-rad img { display: block; width: 100%; height: auto; }
.tp-rad--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 300 / 180; border-style: dashed; color: var(--dim); font-size: 13px; background: var(--bg2); }
.tp-rad--empty small { font-family: var(--mono); font-size: 11px; margin-top: 2px; }
.tp-rnote { margin: 0; padding: 0 4px; font-size: 12px; color: var(--dim); }
.tp-rnote b { font-family: var(--mono); color: var(--gold-ink); }
/* 사이드바가 있을 때 입문 안내·공부: 차례 | 본문 (옆 칸 gd-side 는 사이드바와 겹쳐 숨김) */
.tp-wrap--rail .tp-page--guide { grid-template-columns: 210px minmax(0, 1fr); column-gap: 24px; }
.tp-wrap--rail .tp-page--guide > * { grid-column: 2; }
.tp-wrap--rail .tp-page--guide > .tp-tabs { grid-column: 1; }
.tp-wrap--rail .tp-page--guide > .gd-side { display: none !important; }
.tp-wrap--rail .tp-page--guide > .tp-card, .tp-wrap--rail .tp-page--guide > .gd-pager, .tp-wrap--rail .tp-page--guide > .gl { max-width: 820px; }

}

/* 승률 계산기 쓰는 법 칸 */
.eq-intro__steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.65; color: #cfd3d1; }
.eq-intro__steps b { color: var(--text); }
.eq-intro__t { margin: 22px 0 8px; font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.eq-intro__facts { margin: 0; padding: 0; list-style: none; }
.eq-intro__facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.eq-intro__facts li:first-child { border-top: 0; }
.eq-intro__facts b { flex: 0 0 auto; font-family: var(--mono); color: var(--felt-ink); }
.eq-intro__more { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.eq-intro__more a { color: var(--felt-ink) !important; }