/* 새 스타일(2026-10-25 시안) — 관리자·othelloclub 미리보기 전용. fs_skin2.lib.php 가 켤 때만 실린다. 모든 규칙은 html.fs-skin2 아래에만 건다(일반 방문자 화면·사이트 틀로 새지 않게). 설명: docs/maintenance/skin2.md */ /* ── 색 변수: 라이트 / 앱 다크 ─────────────────────────────────────────────── */ html.fs-skin2{ --s2-bg:#f0f2f6;--s2-surface:#fff;--s2-surface2:#f4f6fa;--s2-line:#dde2ea;--s2-lip:#d0d6e0; --s2-text:#111522;--s2-muted:#586174; --s2-accent:#2e54e8;--s2-accent-ink:#fff;--s2-accent-tint:#e2e8fd;--s2-accent-lip:#1e3aa8; --s2-gold:#e0a127;--s2-gold-tint:#fcefd3;--s2-gold-line:#f2d9a0;--s2-chip:#e6e9f0; --s2-event:#141826;--s2-event-lip:#2b3245;--s2-hero-lip:#0b4f3a; --s2-cta:#f2b33d;--s2-cta-ink:#1f1503;--s2-cta-lip:#a8741a; --s2-disc-ring:rgba(17,21,34,.08); } html.fs-skin2.fs-app-theme-dark{ --s2-bg:#0c0f16;--s2-surface:#151a24;--s2-surface2:#1c2230;--s2-line:#283043;--s2-lip:#05070b; --s2-text:#edf0f6;--s2-muted:#9aa3b5; --s2-accent:#7b97ff;--s2-accent-ink:#0a1030;--s2-accent-tint:#1d2847;--s2-accent-lip:#3d56c2; --s2-gold:#f2b33d;--s2-gold-tint:#2e2511;--s2-gold-line:#4a3b17;--s2-chip:#232a3a; --s2-event:#1a2033;--s2-event-lip:#05070c;--s2-hero-lip:#03291c; --s2-disc-ring:transparent; /* 흑돌 밝은 테두리 없음(2026-10-25 사용자 지시) */ } /* ── 공용 부품: 게임방 돌 사진·벨벳 보드 ──────────────────────────────────── */ /* 돌 그림 = 분석 보드판 렌더러(oc-board-materials.js paint, 모양 버전 51)로 그린 192px 그림(2026-10-25 사용자 지시 '진짜 보드판 돌'). 그림 안 돌은 칸의 96%라 104% 로 채운다. 예전 그림(-v2 없는 이름)은 1년 캐시라 이름을 바꿨다 */ /* 배율별 그림(2026-10-26 사용자 지적 'PC 외부 모니터에서 돌 테두리가 매끄럽지 않다'): 192px 한 장을 배율 1 화면의 40px 칸에 줄이면 가장자리가 계단진다. 보드판(oc-board-materials.js paint)이 작은 돌을 실제 픽셀 크기로 굽는 것처럼, 같은 렌더러로 48px(1x)·96px(2x)를 따로 구워 배율에 맞게 고른다. 3x 이상은 192px */ html.fs-skin2{--s2-disc-b-img:url(/flipsight/image/skin2-disc-black-v2.webp);--s2-disc-w-img:url(/flipsight/image/skin2-disc-white-v2.webp)} @supports (background-image:image-set(url("/flipsight/image/skin2-disc-black-48.webp") 1x)){ html.fs-skin2{--s2-disc-b-img:image-set(url(/flipsight/image/skin2-disc-black-48.webp) 1x,url(/flipsight/image/skin2-disc-black-96.webp) 2x,url(/flipsight/image/skin2-disc-black-v2.webp) 4x); --s2-disc-w-img:image-set(url(/flipsight/image/skin2-disc-white-48.webp) 1x,url(/flipsight/image/skin2-disc-white-96.webp) 2x,url(/flipsight/image/skin2-disc-white-v2.webp) 4x)} } html.fs-skin2 .s2-disc-b{background:transparent var(--s2-disc-b-img) center/104% no-repeat;border-radius:50%} html.fs-skin2 .s2-disc-w{background:transparent var(--s2-disc-w-img) center/104% no-repeat;border-radius:50%} html.fs-skin2 .s2-disc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px} html.fs-skin2 .s2-disc.s2-disc-b{color:#fff;box-shadow:0 0 0 1.5px var(--s2-disc-ring),0 3px 4px rgba(0,0,0,.35)} html.fs-skin2 .s2-disc.s2-disc-w{color:#14171e;box-shadow:0 0 0 1px rgba(17,21,34,.10),0 3px 4px rgba(17,21,34,.22)} html.fs-skin2 .s2-disc svg{width:52%;height:52%;color:inherit} /* 보드판 렌더러로 그린 돌(script/skin2-discs.js, 2026-10-26): 요소 안 캔버스가 돌, 그린 뒤에는 CSS 그림을 끈다 */ /* 가상 요소·svg 돌(명예의 전당 아이콘 26·28·36px, 분석 홈 버튼 44px)은 같은 스크립트가 크기별 그림을 화면 배율로 그려 --s2-disc-{b|w}-{크기} 변수로 넘긴다(없으면 배율별 그림) */ html.fs-skin2 .s2-disc-cv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:-1} /* 돌 요소 안 맨 아래(isolate): 아이콘·글자는 그 위 */ html.fs-skin2 .s2-disc-painted{background-image:none!important;isolation:isolate} html.fs-skin2 .s2-disc-painted:not(.s2-hero-disc){position:relative} html.fs-skin2 .s2-disc.s2-disc-lg{width:48px;height:48px} html.fs-skin2 .s2-velvet{background-color:#008563;background-image:linear-gradient(rgba(3,132,99,.65),rgba(3,132,99,.65)),linear-gradient(rgb(3,26,17),rgb(3,26,17)),url(/flipsight/image/skin2-board-velvet.webp);background-size:auto,auto,250px 250px;background-blend-mode:normal,screen,luminosity} /* 칸선은 오른쪽 끝 기준(돌을 오른쪽에 붙여 두므로 폭이 달라도 칸에 맞는다) */ html.fs-skin2{--s2-vg-image:linear-gradient(rgba(0,0,0,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.34) 1px,transparent 1px),linear-gradient(rgba(3,132,99,.65),rgba(3,132,99,.65)),linear-gradient(rgb(3,26,17),rgb(3,26,17)),url(/flipsight/image/skin2-board-velvet.webp);--s2-vg-size:44px 44px,44px 44px,auto,auto,640px 640px;--s2-vg-pos:right -1px top -1px,right -1px top -1px,0 0,0 0,0 0;--s2-vg-blend:normal,normal,normal,screen,luminosity} html.fs-skin2 .s2-velvet-grid{background-color:#008563;background-image:var(--s2-vg-image);background-size:var(--s2-vg-size);background-position:var(--s2-vg-pos);background-blend-mode:var(--s2-vg-blend)} /* 레이팅 숫자(fs_skin2_rating_html·renderSkin2Record): 로비와 같은 단계 색과 두께 450(2026-10-25 사용자 지시). 색 값은 공용 팔레트 그대로 (랜딩처럼 팔레트 CSS 가 없는 문서용으로 같은 값을 둔다), 다크는 app-theme.css 의 .pz-rt-* 다크 규칙이 이긴다 */ html.fs-skin2 .s2-rt{font-weight:450} html.fs-skin2 .s2-rt.pz-rt-red{color:#e53935}html.fs-skin2 .s2-rt.pz-rt-orange{color:#fb8c00}html.fs-skin2 .s2-rt.pz-rt-purple{color:#8e24aa} html.fs-skin2 .s2-rt.pz-rt-blue{color:#1e88e5}html.fs-skin2 .s2-rt.pz-rt-green{color:#43a047}html.fs-skin2 .s2-rt.pz-rating-unofficial{color:#999} /* 웹 사이트 틀의 하위 메뉴 아래 흰 여백 10px(한국어 .container 위쪽 안쪽 여백, 다국어 .contentsAll 위쪽 바깥 여백, 둘 다 인라인)을 새 스타일 랜딩·퍼즐이 들어 있을 때만 없앤다. 회색 판이 메뉴에 바로 붙는다(2026-10-25 사용자 지시) */ html.fs-skin2 #main-wrap>.container:has(#fsLandingMain,.wrap.s2-web,.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls){padding-top:0!important;padding-left:0!important;padding-right:0!important;overflow-x:clip} /* overflow-x:clip(2026-10-26 가로 스크롤 지적): 틀 좌우 여백을 0 으로 하자 안쪽 .row 의 음수 여백(-12px, 원래 틀 여백 상쇄용)이 화면 오른쪽으로 넘쳐 가로 스크롤이 생겼다. 넘친 칸은 열 안쪽 여백(빈 칸)뿐이라 틀 밖만 잘라 낸다. clip 은 스크롤 영역을 만들지 않아 안의 sticky 는 그대로 동작한다 */ /* 좌우 흰 여백도 없앤다(회색 판이 틀 끝까지, 안쪽 여백은 각 페이지가, 2026-10-26) */ html.fs-skin2 .contentsAll:has(#fsLandingMain,.wrap.s2-web,.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls){margin-top:0!important} /* 다국어 좌우 흰 띠(2026-10-26): 다국어 틀에서는 본문 안 부트스트랩 .container(로비·분석)가 화면 폭별 최대 너비(720·960px)로 가운데에 놓이고, 767px 이하에서는 .text 가 최대 450px(play.css)라 양옆이 비었다(한국어는 바깥 틀도 같은 너비라 안 보였다). 새 스타일 페이지에서는 너비 제한을 푼다 */ html.fs-skin2 .contentsRight>.text:has(#fsLandingMain,.wrap.s2-web,#obListView,.s2-analysis,.s2-conn,main.s2-pg,main.s2-ls,.s2-op){max-width:none!important;margin-left:0!important;margin-right:0!important} html.fs-skin2 .container.pz-container.s2-analysis,html.fs-skin2 body:not(.fs-room-mode) .container.pz-container:has(#obListView){max-width:none!important} /* 랜딩 앱 배너 위아래 흰 띠(2026-10-26 사용자 지적): 배너 감싸개 인라인 위 여백 16px·배너 아래 여백 14px 를 새 스타일 랜딩에서는 0(회색 판에 바로 붙는다) */ html.fs-skin2 #fsLandingMain>.fs-landing-web-banner{margin-top:0!important} html.fs-skin2 #fsLandingMain>.fs-landing-web-banner>.oc-app-banner{margin-bottom:0} /* 다국어 틀(play.css .contentsAll 576px 이상 좌우 16px)의 흰 여백도 새 스타일 페이지에서는 0(한국어 #main-wrap>.container 와 같게, 2026-10-26) */ html.fs-skin2 .contentsAll:has(#fsLandingMain,.wrap.s2-web,.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls){padding-left:0!important;padding-right:0!important} html.fs-skin2 body:not(.fs-room-mode) .contentsAll:has(#obListView){padding-left:0!important;padding-right:0!important} /* 아래 테일과의 흰 띠(2026-10-26): 한국어는 본문 칸 감싸개(head.php .sticky-top pb-md-3, 768px 이상 16px), 다국어는 .path-bottom 인라인 위 여백 10px. 새 스타일 페이지만 0 */ html.fs-skin2 body:not(.fs-room-mode) #main-wrap .sticky-top:has(#fsLandingMain,.wrap.s2-web,#obListView,.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls){padding-bottom:0!important} html.fs-skin2 body:not(.fs-room-mode):has(#fsLandingMain,.wrap.s2-web,#obListView,.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls) .path-bottom{margin-top:0!important} /* 분석·GIF·연결 상태는 본문이 오른쪽 사이드바보다 짧으면 회색 판 아래가 흰 칸으로 남았다(2026-10-26 사용자 지적). 사이드바가 보이는 992px 이상에서 본문 칸을 사이드바 높이까지 늘리고 마지막 회색 판(분석·GIF·연결 상태·아레나/후원·오프닝·레슨, 10-26 퍼즐·리더보드 홈 .wrap·로비 main#obMain 도)이 남는 높이를 채운다. 가로 폭·여백은 그대로. 한국어: 테마 .row 안 본문 열(.col-lg-9) > .sticky-top. 다국어: .contentsAll(메뉴 오른쪽 띄움) → 같은 높이 두 칸. 새 페이지는 표식만 이 목록에 넣는다 */ @media (min-width:992px){ html.fs-skin2 #main-wrap .row>.col-lg-9:has(>.sticky-top :is(.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls,.wrap.s2-web,#obListView:not(.pz-hide))){display:flex;flex-direction:column} html.fs-skin2 #main-wrap .row>.col-lg-9>.sticky-top:has(:is(.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls,.wrap.s2-web,#obListView:not(.pz-hide))){flex:1 0 auto;display:flex;flex-direction:column} html.fs-skin2 #main-wrap .row>.col-lg-9>.sticky-top>:is(.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls,.wrap.s2-web,main#obMain:has(#obListView:not(.pz-hide))){flex:1 0 auto;width:100%} html.fs-skin2 .contentsAll:has(.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls,.wrap.s2-web,#obListView:not(.pz-hide)){display:flex;flex-direction:row-reverse;align-items:stretch} html.fs-skin2 .contentsAll:has(.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls,.wrap.s2-web,#obListView:not(.pz-hide))>.menu_pc{flex:0 0 260px;float:none;height:auto} html.fs-skin2 .contentsAll:has(.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls,.wrap.s2-web,#obListView:not(.pz-hide))>:is(.contentsRight,main.s2-pg){flex:1 1 0;min-width:0;margin:0!important;display:flex;flex-direction:column} /* play.css .contentsRight margin:auto 가 남는 높이를 위아래로 나눠 본문이 가운데로 떴다(다국어 위아래 흰 띠, 2026-10-26) */ /* 아레나 안내·후원은 main 이 바로 칸 */ html.fs-skin2 .contentsAll:has(.s2-analysis,.s2-gif,.s2-conn,.s2-pg,.s2-op,.s2-ls,.wrap.s2-web,#obListView:not(.pz-hide))>.contentsRight>:is(.text:has(>.s2-analysis,>.s2-conn,>main.s2-pg,>main.s2-ls,>.wrap.s2-web,>main#obMain #obListView:not(.pz-hide)),.s2-gif,.text.s2-op,main.s2-pg){flex:1 0 auto;width:100%;display:flex;flex-direction:column} html.fs-skin2 .contentsAll:has(.s2-analysis,.s2-conn,.s2-pg,.s2-ls,.wrap.s2-web,#obListView:not(.pz-hide))>.contentsRight>.text>:is(.s2-analysis,.s2-conn,main.s2-pg,main.s2-ls,.wrap.s2-web,main#obMain:has(#obListView:not(.pz-hide))){flex:1 0 auto;width:100%} /* 로비: main#obMain 안 회색 판(.pz-container)이 남는 높이를 채운다(퍼즐·리더보드 홈은 .wrap 이 곧 회색 판, 2026-10-26 다국어 퍼즐 하단 흰 띠) */ html.fs-skin2 main#obMain:has(#obListView:not(.pz-hide)){display:flex;flex-direction:column} html.fs-skin2 main#obMain>.pz-container:has(#obListView:not(.pz-hide)){flex:1 0 auto;width:100%} } /* ── 랜딩(start.php + _start_skin2.php): 시안 "새 스타일 시안" 홈과 같은 순서·크기 ─────────────── */ html.fs-skin2 body.fs-landing,html.fs-skin2 .fsl-root.fs-landing{background:var(--s2-bg);color:var(--s2-text)} html.fs-skin2 .fs-landing .wrap{max-width:1200px;padding:16px 16px 24px} /* 맨 위 빠른 매칭 대기 줄 아래 10px(_online_presence.php)는 예전 흰 랜딩용이다. 새 스타일은 회색 판(.wrap 위 16px)이 바로 이어지게 뺀다(2026-10-26: 흰 띠가 보였다) */ html.fs-skin2 body.fs-landing #fsAutoMatchNoticeSlot #ocAutoMatchNotice,html.fs-skin2 #fsAutoMatchNoticeSlot.is-landing #ocAutoMatchNotice{margin-bottom:0} /* 웹(사이트 틀 안, landing_web_inline.lib.php): 감싸개가 본문 폭을 줄이던 값(폰 100%-20px·태블릿 80%)을 풀어 좌우 여백을 다른 새 스타일 웹 페이지(퍼즐·로비·리더보드 16px)와 같은 안쪽 여백 하나로(2026-10-25 사용자 지시 "모바일 웹 랜딩 좌우 여백이 커"). 900px 이상은 아래 32px. 아래 안내 구역(.fs-landing-guide)도 폰에서 같은 16px 선에 맞춘다(원래 랜딩 위쪽과 같은 10px 로 맞춰 둔 값) */ html.fs-skin2 .fsl-root.fs-landing .wrap{width:auto;max-width:none;margin:0} @media (max-width:767.98px){html.fs-skin2 .fs-landing-guide{width:calc(100% - 32px)}} html.fs-skin2 .fs-landing .s2-page{container-type:inline-size} /* 좁은 배치(기본): 머리줄·본문 묶음·언어 버튼은 560px 가운데. 넓은 배치는 아래 @container(.s2-page 폭 736px 이상, 로비 기준과 같게) 에서 푼다 */ html.fs-skin2 .fs-landing .top,html.fs-skin2 .fs-landing .s2-home,html.fs-skin2 .fs-landing .langpick,html.fs-skin2 .fs-landing #fsMatchError{max-width:none;margin-left:auto;margin-right:auto} /* 1단도 폭을 다 쓴다(로비와 같게, 2026-10-26. 예전 560px 가운데) */ html.fs-skin2 .fs-landing .badge[hidden],html.fs-skin2 .fs-landing .s2-stat[hidden],html.fs-skin2 .fs-landing .live[hidden],html.fs-skin2 .fs-landing .s2-arena[hidden],html.fs-skin2 .fs-landing .s2-arena-badge[hidden]{display:none!important} /* 머리줄: 로고·이름·한 줄 소개 / 사진·닉네임·리그 알약 + 설정 */ html.fs-skin2 .fs-landing .top{gap:8px;min-height:44px;padding:0 0 10px} /* 머리줄 위 여백은 .wrap 16px 하나(로비 제목 위 16px 와 같게, 2026-10-25) */ /* 다국어: 긴 소개(영어 'Online play, puzzles & analysis' 등)가 계정 알약을 밀어 닉네임이 알약 밖으로 나갔다(2026-10-25). 이름 칸은 남는 폭을 다 쓰고 소개는 그 안에서 말줄임(전체 문구는 title), 계정 알약은 줄지 않는다 */ html.fs-skin2 .fs-landing .brand{flex:1 1 auto;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:1px;font-size:21px;font-weight:800;letter-spacing:-.3px;line-height:1} html.fs-skin2 .fs-landing .brand img{grid-row:1/3;width:38px;height:38px;border-radius:11px;box-shadow:0 2px 0 var(--s2-lip)} html.fs-skin2 .fs-landing .s2-brand-tag{grid-column:2;width:0;min-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--s2-muted);font-size:11px;font-weight:400;letter-spacing:0;line-height:1.2;white-space:nowrap} /* 계정 알약: 사진·닉네임·리그 + 설정을 한 알약에(2026-10-25 사용자 제안, 구분선 없음). 테두리는 .acct 전체에 건다 */ html.fs-skin2 .fs-landing .acct{flex:none;gap:8px;min-height:44px;box-sizing:border-box;padding:5px 3px 5px 5px;border:1px solid var(--s2-line);border-radius:999px;background:var(--s2-surface);color:var(--s2-muted)} html.fs-skin2 .fs-landing .acct>a:not(.acct-set){padding:0 4px 0 9px;font-size:14px} html.fs-skin2 .fs-landing .acct .acct-id{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;margin:0;padding:0;border:0;background:none} /* 사진 오른쪽 여백: 알약 간격 8px 에서 4px 를 당긴다(2026-10-26 사용자 지시) */ html.fs-skin2 .fs-landing .s2-acct-photo{flex:none;width:32px;height:32px;margin:0 -4px 0 0;border-radius:50%;object-fit:cover;background:var(--s2-chip)} html.fs-skin2 .fs-landing .s2-acct-initial{display:flex;align-items:center;justify-content:center;color:var(--s2-text);font-size:14px;font-weight:800;line-height:1} html.fs-skin2 .fs-landing .acct .nick{max-width:min(120px,20vw);color:var(--s2-text);font-size:13px;font-weight:700;line-height:1.1} /* 리그 줄: 넘치면 말줄임 대신 글자를 줄인다(start.php 의 맞춤 스크립트, 보드 오프닝 이름과 같은 방식, 2026-10-26). 기본 11px·넓은 배치 12px */ html.fs-skin2 .fs-landing .acct .acct-league{color:var(--s2-gold);font-size:11px;font-weight:700;line-height:1.1;white-space:nowrap} html.fs-skin2 .fs-landing .acct .acct-set{position:relative;width:32px;height:32px;margin:0 0 0 -5px;color:var(--s2-muted)} /* 닉네임과 톱니 사이 좁게(2026-10-25) */ html.fs-skin2 .fs-landing .acct .acct-set svg{width:20px;height:20px} /* 격자: 위 묶음(플레이 영역·아레나·로비·퍼즐·리더보드)·아래 묶음(AI 분석·레슨·바로가기). 좁은 배치는 한 줄로 쌓고, 넓은 배치(@container)는 묶음마다 왼쪽 큰 칸 + 오른쪽 두 칸. 묶음을 나눠 두 묶음의 행 높이가 서로 끌려가지 않는다 */ html.fs-skin2 .fs-landing .s2-blk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:0} html.fs-skin2 .fs-landing .s2-blk-top{grid-template-areas:"hero hero" "arena arena" "playh playh" "lobby puzzle" "lobby board"} html.fs-skin2 .fs-landing .s2-blk-bottom{grid-template-areas:"ai ai" "lesson lesson" "shorth shorth" "short short" "chat chat"} /* 오픈채팅 카드(바로가기 아래 한 줄, 2026-10-26): 레슨 카드와 같은 크기·배치(아래 .s2-tile-lesson 값과 같게), 테두리는 실선, 아이콘은 카카오톡 노란 바탕 */ html.fs-skin2 .fs-landing .s2-tile.s2-tile-chat{grid-area:chat;margin-top:12px;min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:9px 14px;border-radius:18px} /* 테두리는 바로가기 아이콘 칸과 같은 실선+아래 두께(타일 기본). 높이는 레슨 카드보다 낮게(2026-10-26) */ html.fs-skin2 .fs-landing .s2-ic-tint.s2-ic-kakao{width:36px;height:36px;border-radius:11px;background:#fee500} html.fs-skin2 .fs-landing .s2-ic-tint.s2-ic-kakao svg{width:25px;height:25px} html.fs-skin2 .fs-landing .s2-hero{grid-area:hero} html.fs-skin2 .fs-landing .s2-arena{grid-area:arena} html.fs-skin2 .fs-landing .s2-sec-play{grid-area:playh} html.fs-skin2 .fs-landing .s2-tile-lobby{grid-area:lobby} html.fs-skin2 .fs-landing .s2-tile-puzzle{grid-area:puzzle} html.fs-skin2 .fs-landing .s2-tile-board{grid-area:board;margin-top:10px} html.fs-skin2 .fs-landing .s2-tile-ai{grid-area:ai;margin-top:10px} html.fs-skin2 .fs-landing .s2-tile-lesson{grid-area:lesson;margin-top:12px} html.fs-skin2 .fs-landing .s2-sec-short{grid-area:shorth} html.fs-skin2 .fs-landing .s2-row{grid-area:short} html.fs-skin2 .fs-landing .s2-sec{margin:22px 4px 10px;color:var(--s2-muted);font-size:13px;font-weight:800;letter-spacing:.2px;line-height:1.2} /* 플레이 영역(보드 위 빠른 매칭·AI 대국) */ html.fs-skin2 .fs-landing .s2-hero{position:relative;overflow:hidden;margin-top:6px;padding:18px;border-radius:26px;color:#fff;box-shadow:0 4px 0 var(--s2-hero-lip)} html.fs-skin2 .fs-landing .s2-hero-disc{position:absolute;width:36px;height:36px;box-shadow:0 2px 3px rgba(0,0,0,.4)} html.fs-skin2 .fs-landing :is(.s2-hero-disc-pc,.s2-hero-disc-t){display:none} @media (min-width:768px){html.fs-skin2 .fs-landing .s2-hero-disc-m{display:none}html.fs-skin2 .fs-landing .s2-hero-disc-t{display:block}} /* 2단: 같은 배치를 한 줄 내려(2026-10-26), 칸 1100px 이상은 아래 -pc */ html.fs-skin2 .fs-landing .s2-hero-live,html.fs-skin2 .fs-landing .s2-hero-copy{position:relative} html.fs-skin2 .fs-landing .s2-hero-live{top:-6px;z-index:1} /* 인원 배지는 돌 위에 겹쳐 그린다(1단은 맨 윗줄에도 돌, 2026-10-26 사용자 지시). 폭은 영역 전체, 한 줄 */ /* 인원 배지만 6px 위로(배치는 그대로, 2026-10-26 사용자 지시) */ /* 인원 줄은 영역 폭을 다 쓴다(돌 위에 겹침, 2026-10-26). 한 줄, 넘치면 스크립트가 글자를 줄이고 끝내 넘치면 is-wrap 으로 두 줄 */ html.fs-skin2 .fs-landing .s2-hero .fs-presence{display:inline-flex;justify-content:flex-start;flex-wrap:nowrap;max-width:100%;box-sizing:border-box;gap:4px 10px;margin:0;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.26);color:#fff;font-size:12px;font-weight:700;line-height:1.3} html.fs-skin2 .fs-landing .s2-hero .fs-presence-icon{width:14px;height:14px} html.fs-skin2 .fs-landing .s2-hero .fs-presence-item{flex:none;white-space:nowrap} html.fs-skin2 .fs-landing .s2-hero .fs-presence.is-wrap{flex-wrap:wrap} html.fs-skin2 .fs-landing .s2-hero .fs-presence .games .dot{background:#fb923c} html.fs-skin2 .fs-landing .s2-hero .fs-presence .puzzle .dot{background:#a78bfa} html.fs-skin2 .fs-landing .s2-hero-eyebrow{margin:22px 0 2px;color:#fff;font-size:13px;font-weight:700;line-height:1.3;opacity:.85} html.fs-skin2 .fs-landing .s2-hero-title{max-width:calc(100% - 76px);margin:0 0 20px;color:#fff;font-size:28px;font-weight:900;letter-spacing:-.6px;line-height:1.2} html.fs-skin2 .fs-landing .s2-hero-btns{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:10px} html.fs-skin2 .fs-landing .s2-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:6px 10px;border-radius:18px;text-decoration:none;font-weight:900;line-height:1.15;transition:transform .08s ease,box-shadow .08s ease} html.fs-skin2 .fs-landing .s2-btn svg{width:22px;height:22px;flex:none;color:currentColor} html.fs-skin2 .fs-landing .s2-btn-ghost svg{width:20px;height:20px} html.fs-skin2 .fs-landing .s2-btn-label{display:flex;flex-direction:column;align-items:flex-start;min-width:0} html.fs-skin2 .fs-landing .s2-btn-label small{font-size:11px;font-weight:600;opacity:.9} html.fs-skin2 .fs-landing .s2-btn-label small.warn{color:#fde68a} html.fs-skin2 .fs-landing .s2-btn-gold{background:var(--s2-cta);color:var(--s2-cta-ink);font-size:17px;box-shadow:0 4px 0 var(--s2-cta-lip)} html.fs-skin2 .fs-landing .s2-btn-ghost{border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff;font-size:15px;font-weight:800;box-shadow:0 4px 0 rgba(0,0,0,.22)} html.fs-skin2 .fs-landing .s2-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--s2-cta-lip)} html.fs-skin2 .fs-landing .s2-btn-ghost:active{box-shadow:0 1px 0 rgba(0,0,0,.22)} html.fs-skin2 .fs-landing .s2-btn .badge.match{position:absolute;top:6px;right:8px;display:inline-flex;align-items:center;gap:4px;color:#0d9488;font-size:13px;font-weight:800;line-height:1} html.fs-skin2 .fs-landing .s2-btn .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor} /* 대기 인원 색 = 로비 빠른 매칭 버튼 배경의 청록(#0d9488, 2026-10-26: 처음 #0f766e 에서 조금 밝게. 민트는 노란 버튼 위 대비 1.2:1 로 묻혔다). 관리자·운영 계정만 보인다(start.php $matchWaiterAdmin) */ /* 데일리 아레나 카드 */ html.fs-skin2 .fs-landing .s2-arena{display:flex;align-items:center;gap:12px;min-width:0;margin-top:14px;padding:12px 14px;border-radius:20px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 3px 0 var(--s2-lip);color:var(--s2-text);text-decoration:none} html.fs-skin2 .fs-landing .s2-ic-tint{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--s2-accent-tint);color:var(--s2-accent)} html.fs-skin2 .fs-landing .s2-ic-tint svg{width:24px;height:24px} html.fs-skin2 .fs-landing .s2-ic-tint.s2-ic-gold{background:var(--s2-gold-tint);color:var(--s2-gold)} html.fs-skin2 .fs-landing .s2-arena-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} html.fs-skin2 .fs-landing .s2-arena-top{display:flex;align-items:center;flex-wrap:nowrap;gap:4px 6px;min-width:0;overflow:hidden} /* 배지 줄내림 없음, 넘치면 스크립트가 글자를 줄인다(2026-10-26) */ html.fs-skin2 .fs-landing .s2-arena-title{font-size:15px;font-weight:800;line-height:1.25;white-space:nowrap} html.fs-skin2 .fs-landing .s2-arena-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;background:var(--s2-accent-tint);color:var(--s2-accent);font-size:11px;font-weight:800;line-height:1.3;white-space:nowrap} html.fs-skin2 .fs-landing .s2-arena-badge.s2-arena-reg{background:#dcfce7;color:#166534} /* 접수 중: 로비 아레나 카드와 같은 기존 초록(2026-10-25) */ html.fs-skin2.fs-app-theme-dark .fs-landing .s2-arena-badge.s2-arena-reg{background:rgba(34,197,94,.18);color:#4ade80} html.fs-skin2 .fs-landing .s2-arena-badge.live{background:#fff7ed;color:#c2410c;box-shadow:inset 0 0 0 1px #fed7aa} html.fs-skin2 .fs-landing .s2-arena-badge.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:fsLiveDot 1.6s ease-in-out infinite} html.fs-skin2.fs-app-theme-dark .fs-landing .s2-arena-badge.live{background:rgba(249,115,22,.16);color:#fb923c;box-shadow:inset 0 0 0 1px rgba(251,146,60,.35)} html.fs-skin2 .fs-landing .s2-arena-meta{color:var(--s2-muted);font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden} /* 시간 줄도 한 줄(2026-10-26) */ html.fs-skin2 .fs-landing .s2-arena-cd{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none} html.fs-skin2 .fs-landing .s2-arena-cd-lb{color:var(--s2-muted);font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap} html.fs-skin2 .fs-landing .s2-arena-cd-tm{font-size:19px;font-weight:800;line-height:1.1;letter-spacing:.3px;font-variant-numeric:tabular-nums} /* 격자 배치(2026-10-26 사용자 지시): 1줄 = 제목·'접수 중' 배지(줄내림 없음, 오른쪽 끝까지) + 그 위 오른쪽 '시작까지', 2줄 = 시간 줄 + 오른쪽 남은 시간. 묶음(copy·cd)은 풀고(display:contents) 칸에 직접 놓는다. 넘치면 스크립트가 제목 글자·시간 줄 글자를 줄이고, 그래도 좁으면 남은 시간 글자를 14px 까지 줄인다 */ html.fs-skin2 .fs-landing .s2-arena{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic top top" "ic mt tm";column-gap:12px;row-gap:3px;align-items:center} html.fs-skin2 .fs-landing .s2-arena>.s2-ic-tint{grid-area:ic} html.fs-skin2 .fs-landing .s2-arena :is(.s2-arena-copy,.s2-arena-cd){display:contents} html.fs-skin2 .fs-landing .s2-arena .s2-arena-top{grid-area:top;flex-wrap:nowrap;min-width:0;overflow:hidden} html.fs-skin2 .fs-landing .s2-arena .s2-arena-title{flex:none;white-space:nowrap} /* 줄지 않게: 넘치면 스크립트가 글자를 줄인다(줄면 배지가 제목 위에 겹쳤다) */ html.fs-skin2 .fs-landing .s2-arena .s2-arena-badge{flex:none} html.fs-skin2 .fs-landing .s2-arena .s2-arena-meta{grid-area:mt;min-width:0} html.fs-skin2 .fs-landing .s2-arena .s2-arena-cd-lb{grid-row:1;grid-column:3;justify-self:end;position:relative} /* 첫 줄은 오른쪽 끝까지 쓰고 '시작까지' 폭만큼만 비운다(스크립트가 제목 줄 오른쪽 바깥 여백을 그 폭으로) */ html.fs-skin2 .fs-landing .s2-arena .s2-arena-cd-tm{grid-area:tm;justify-self:end;white-space:nowrap} /* 타일: 로비(세로 두 칸)·퍼즐·리더보드·AI 분석(가로 두 칸)·레슨 */ html.fs-skin2 .fs-landing .s2-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0;min-height:116px;box-sizing:border-box;padding:14px;border-radius:22px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 3px 0 var(--s2-lip);color:var(--s2-text);text-decoration:none;transition:transform .08s ease,box-shadow .08s ease} html.fs-skin2 .fs-landing .s2-tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--s2-lip)} html.fs-skin2 .fs-landing .s2-tile-lobby{align-items:flex-start;padding:16px} /* 로비 제목은 시안처럼 아래 묶음(제목·인원 두 줄·입장)에. 인원과 상관없이 고정되게, 대국 중 0명이면 그 줄을 지우지 않고 보이지만 않게 둔다(자리 유지, 2026-10-25 사용자 지시). 인원 갱신 스크립트는 hidden 속성만 바꾼다 */ html.fs-skin2 .fs-landing .s2-tile-lobby .s2-stat-games[hidden]{display:inline-flex!important;visibility:hidden} html.fs-skin2 .fs-landing .s2-tile .s2-disc{width:40px;height:40px} html.fs-skin2 .fs-landing .s2-tile .s2-disc.s2-disc-lg{width:48px;height:48px} html.fs-skin2 .fs-landing .s2-tile-head,html.fs-skin2 .fs-landing .s2-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%} html.fs-skin2 .fs-landing .s2-tile-foot{align-items:flex-end} html.fs-skin2 .fs-landing .s2-tile-title{font-size:17px;font-weight:900;letter-spacing:-.3px;line-height:1.2} html.fs-skin2 .fs-landing .s2-tile-lobby .s2-tile-title{font-size:20px;letter-spacing:-.4px} html.fs-skin2 .fs-landing .s2-tile-body{display:flex;flex-direction:column;gap:8px;width:100%} html.fs-skin2 .fs-landing .s2-tile-stats{display:flex;flex-direction:column;gap:5px} /* 인원 닷·아이콘·숫자는 예전 랜딩 타일 배지(.tile .badge)와 같은 크기: 글자 14px·아이콘 15px·닷 8px·간격 4px(2026-10-25 사용자 지시). 글자 두께는 시안 값(2026-10-25 예전 레이아웃 두께로 맞췄다가 사용자 지시로 되돌림) */ html.fs-skin2 .fs-landing .s2-stat{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;color:var(--s2-muted);font-size:14px;font-weight:700;line-height:1} html.fs-skin2 .fs-landing .s2-stat b{font-weight:700} html.fs-skin2 .fs-landing .s2-stat svg{width:15px;height:15px;flex:none} /* 닷·아이콘 뒤 글자(앞 글자 + 숫자 + 뒤 글자, 예: '게임: ' 1 '명'). 글자 사이는 붙이고 닷·아이콘과만 4px. 앞 글자는 좁으면 말줄임 */ html.fs-skin2 .fs-landing .s2-stat{gap:0} html.fs-skin2 .fs-landing .s2-stat>.dot,html.fs-skin2 .fs-landing .s2-stat>svg{margin-right:4px} html.fs-skin2 .fs-landing .s2-stat-pre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:pre} html.fs-skin2 .fs-landing .s2-stat-suf{flex:none;white-space:pre} html.fs-skin2 .fs-landing .s2-stat>b{flex:none} html.fs-skin2 .fs-landing .s2-stat .dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#f97316} html.fs-skin2 .fs-landing .s2-stat-puzzle .dot{background:#8b5cf6} html.fs-skin2.fs-app-theme-dark .fs-landing .s2-stat-puzzle .dot{background:#a78bfa} /* 퍼즐 타일 풀이 닷: 아이콘 가운데가 아니라 위쪽에 맞춘다(2026-10-25 사용자 지시) */ html.fs-skin2 .fs-landing .s2-tile-puzzle .s2-stat-puzzle{align-self:flex-start;margin-top:3px} /* 돌 오른쪽 위, 닷+숫자만(2026-10-26 처음 시안대로) */ html.fs-skin2 .fs-landing .s2-tile-go{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding:8px 12px;border-radius:12px;background:var(--s2-accent-tint);color:var(--s2-accent);font-size:13px;font-weight:800} html.fs-skin2 .fs-landing .s2-tile-go svg{width:16px;height:16px} html.fs-skin2 .fs-landing .s2-tile-rating{color:var(--s2-muted);font-size:18px;font-weight:450;line-height:1.1;font-variant-numeric:tabular-nums} html.fs-skin2 .fs-landing .s2-q{margin-left:1px;font-size:.7em} html.fs-skin2 .fs-landing .s2-tile-ai{flex-direction:row;align-items:stretch;gap:14px} html.fs-skin2 .fs-landing .s2-tile-ai-copy{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px} html.fs-skin2 .fs-landing .s2-tile-ai-txt{display:flex;flex-direction:column;gap:3px} html.fs-skin2 .fs-landing .s2-tile-ai-txt small{color:var(--s2-muted);font-size:12px;line-height:1.45} html.fs-skin2 .fs-landing .s2-evalbar{display:flex;flex-direction:column;gap:5px;width:100%} html.fs-skin2 .fs-landing .s2-evalbar-lb{display:flex;justify-content:space-between;color:var(--s2-muted);font-size:11px;font-weight:700} html.fs-skin2 .fs-landing .s2-evalbar-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#e5e5e5;box-shadow:inset 0 0 0 1px var(--s2-line)} html.fs-skin2 .fs-landing .s2-evalbar-bar i{width:50%;background:#171717} html.fs-skin2 .fs-landing .s2-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));align-self:center;width:140px;height:140px;margin:0;flex:none;border-radius:4px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.18)} /* 나무 테두리 없음(2026-10-25 사용자 지시) */ html.fs-skin2 .fs-landing .s2-board-cell{display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.6)} html.fs-skin2 .fs-landing .s2-board-cell .s2-disc-b,html.fs-skin2 .fs-landing .s2-board-cell .s2-disc-w{width:24px;height:24px;box-shadow:0 1px 2px rgba(0,0,0,.45)} html.fs-skin2 .fs-landing .s2-board-ev{font-size:13px;font-weight:700;line-height:1;color:#f0f0f0;text-shadow:0 1px 1px rgba(0,0,0,.5)} html.fs-skin2 .fs-landing .s2-board-ev.is-best{color:gold} html.fs-skin2 .fs-landing .s2-tile-lesson{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:12px 14px;border-radius:20px;border-style:dashed} html.fs-skin2 .fs-landing .s2-lesson-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} html.fs-skin2 .fs-landing .s2-lesson-copy strong{font-size:15px;font-weight:800} html.fs-skin2 .fs-landing .s2-lesson-copy small{font-size:12px;color:var(--s2-muted)} html.fs-skin2 .fs-landing .s2-chev{width:20px;height:20px;flex:none;color:var(--s2-muted)} /* 바로가기: 두께 있는 아이콘 칸 + 아래 이름, 새 글 표시는 아이콘 칸 모서리 */ html.fs-skin2 .fs-landing .s2-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0 -4px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;gap:10px 4px} html.fs-skin2 .fs-landing .s2-row a{position:relative;gap:6px;padding:4px 0;color:var(--s2-text);font-size:11px;font-weight:700} html.fs-skin2 .fs-landing .s2-row-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;box-sizing:border-box;border-radius:16px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 2px 0 var(--s2-lip)} html.fs-skin2 .fs-landing .s2-row .s2-row-ic svg{width:21px;height:21px;color:var(--s2-text)} html.fs-skin2 .fs-landing .s2-row .fs-new-badge{position:absolute;top:2px;left:calc(50% + 13px)} /* LIVE 배지도 New 처럼 아이콘 칸 오른쪽 위에 얹는다(2026-10-26: 이름 옆에 두면 'Events LIVE' 가 'Ev… LIVE' 로 잘렸다). 이름이 길면 아래 스크립트가 글자를 줄인다 */ html.fs-skin2 .fs-landing .s2-row .fs-live-badge{position:absolute;top:0;left:calc(50% - 4px);margin:0;z-index:1} /* 아이콘 칸 오른쪽 위 모서리에 걸치게(2026-10-26) */ html.fs-skin2 .fs-landing .s2-row .lbtxt{text-overflow:clip} /* 7칸(한국어 오픈채팅 포함, 2026-10-26): 칸이 46px 보다 좁은 기기(360px 폭 등)에서는 아이콘 칸을 칸 폭에 맞춘다 */ html.fs-skin2 .fs-landing .s2-row-wrap .s2-row-ic{width:min(46px,100%);height:auto;aspect-ratio:1/1} html.fs-skin2 .fs-landing .langpick{margin-top:20px} html.fs-skin2 .fs-landing .langbtn{min-height:36px;background:transparent;border-color:var(--s2-line);color:var(--s2-muted)} /* 넓은 배치: 시안 "PC 웹" 홈. 화면 폭이 아니라 본문 칸(.s2-page) 폭으로 정한다(웹은 사이트 틀 안이라 PC 에서도 본문 칸이 800~900px). ① 736px 이상(로비 800px 와 같은 바깥 폭): PC 배치(왼쪽 큰 칸 + 오른쪽 두 칸), 크기는 칸 폭에 맞춰 줄인 값 ② 1100px 이상: 시안 PC 크기 그대로. 처음엔 980px 하나로 잡아 PC 웹이 모바일 배치로 보였다(2026-10-25 "pc 레이아웃이 달라") */ @media (min-width:768px){ html.fs-skin2 .fs-landing .wrap{padding:16px 24px 40px} /* 웹(사이트 틀 안): 본문 칸을 거의 꽉 채운다(2026-10-25 사용자 지시 "가로 너비를 더 넓혀도") */ html.fs-skin2 .fsl-root.fs-landing .wrap{width:auto;max-width:none;margin:0;padding:16px 24px 32px} } /* 2단 기준 = 화면 폭 768px 이상(분석 페이지 index 와 같은 기준, 새 페이지 넷 공통, 2026-10-26 사용자 지시. 예전 본문 폭 760→736px) */ @media (min-width:768px){ html.fs-skin2 .fs-landing .top,html.fs-skin2 .fs-landing .s2-home,html.fs-skin2 .fs-landing #fsMatchError{max-width:none} html.fs-skin2 .fs-landing .top{padding-bottom:20px} html.fs-skin2 .fs-landing .brand{column-gap:12px;row-gap:2px;font-size:26px;letter-spacing:-.4px} html.fs-skin2 .fs-landing .brand img{width:46px;height:46px;border-radius:13px} html.fs-skin2 .fs-landing .s2-brand-tag{font-size:13px} html.fs-skin2 .fs-landing .acct{min-height:48px;padding:6px 5px 6px 6px} html.fs-skin2 .fs-landing .s2-acct-photo{width:34px;height:34px} html.fs-skin2 .fs-landing .acct .nick{font-size:14px;font-weight:800} html.fs-skin2 .fs-landing .acct .acct-league{font-size:12px;font-weight:800} html.fs-skin2 .fs-landing .acct .acct-set{width:36px;height:36px} html.fs-skin2 .fs-landing .acct .acct-set svg{width:22px;height:22px} html.fs-skin2 .fs-landing .s2-home{display:flex;flex-direction:column;gap:18px} /* 오른쪽 두 칸은 212px(시안) 까지, 좁으면 본문 칸의 21% 로 줄고 나머지가 왼쪽 큰 칸 */ html.fs-skin2 .fs-landing .s2-blk{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,min(212px,21%)));gap:14px} html.fs-skin2 .fs-landing .s2-blk>*{margin:0} html.fs-skin2 .fs-landing .s2-blk-top{grid-template-rows:auto minmax(110px,1fr) minmax(110px,1fr);grid-template-areas:"hero arena arena" "hero lobby puzzle" "hero lobby board"} html.fs-skin2 .fs-landing .s2-blk-top.s2-no-arena{grid-template-rows:minmax(110px,1fr) minmax(110px,1fr);grid-template-areas:"hero lobby puzzle" "hero lobby board"} html.fs-skin2 .fs-landing .s2-blk-bottom{grid-template-rows:auto 1fr;grid-template-areas:"ai lesson lesson" "ai short short"} html.fs-skin2 .fs-landing .s2-blk-bottom:has(.s2-tile-chat){grid-template-rows:auto 1fr auto;grid-template-areas:"ai lesson lesson" "ai short short" "ai chat chat"} html.fs-skin2 .fs-landing .s2-tile.s2-tile-chat{padding:10px 16px} html.fs-skin2 .fs-landing .s2-sec{display:none} html.fs-skin2 .fs-landing .s2-hero{display:flex;flex-direction:column;justify-content:space-between;min-height:340px;padding:24px 26px;border-radius:28px} html.fs-skin2 .fs-landing .s2-hero .fs-presence{gap:4px 12px;padding:7px 13px;font-size:13px} html.fs-skin2 .fs-landing .s2-hero-eyebrow{margin:0 0 4px;font-size:14px} html.fs-skin2 .fs-landing .s2-hero-title{max-width:none;margin-bottom:20px;font-size:34px;letter-spacing:-.8px;line-height:1.15} html.fs-skin2 .fs-landing .s2-hero-btns{max-width:440px} html.fs-skin2 .fs-landing .s2-arena{padding:14px 16px} html.fs-skin2 .fs-landing .s2-arena-title{font-size:16px} html.fs-skin2 .fs-landing .s2-arena-meta{font-size:13px} html.fs-skin2 .fs-landing .s2-arena-cd-lb{font-size:11px} html.fs-skin2 .fs-landing .s2-arena-cd-tm{font-size:20px} html.fs-skin2 .fs-landing .s2-tile{min-height:0} html.fs-skin2 .fs-landing .s2-tile-lobby .s2-tile-title{font-size:21px} html.fs-skin2 .fs-landing .s2-tile-go{padding:9px 12px;font-size:14px} html.fs-skin2 .fs-landing .s2-tile .s2-disc{width:42px;height:42px} html.fs-skin2 .fs-landing .s2-tile-title{font-size:18px} html.fs-skin2 .fs-landing .s2-tile-ai{align-items:center;gap:18px;padding:20px 22px;border-radius:24px} html.fs-skin2 .fs-landing .s2-tile-ai-copy{justify-content:center;gap:14px} html.fs-skin2 .fs-landing .s2-tile-ai .s2-disc.s2-disc-lg{width:52px;height:52px} html.fs-skin2 .fs-landing .s2-tile-ai .s2-tile-title{font-size:21px} html.fs-skin2 .fs-landing .s2-tile-ai-txt{gap:4px} html.fs-skin2 .fs-landing .s2-tile-ai-txt small{font-size:13px} html.fs-skin2 .fs-landing .s2-evalbar{max-width:280px} html.fs-skin2 .fs-landing .s2-evalbar-lb{font-size:12px} html.fs-skin2 .fs-landing .s2-evalbar-bar{height:9px} html.fs-skin2 .fs-landing .s2-board{width:170px;height:170px} html.fs-skin2 .fs-landing .s2-board-cell .s2-disc-b,html.fs-skin2 .fs-landing .s2-board-cell .s2-disc-w{width:27px;height:27px} html.fs-skin2 .fs-landing .s2-board-ev{font-size:15px} html.fs-skin2 .fs-landing .s2-tile-lesson{padding:14px 16px} html.fs-skin2 .fs-landing .s2-lesson-copy strong{font-size:16px} html.fs-skin2 .fs-landing .s2-lesson-copy small{font-size:13px} html.fs-skin2 .fs-landing .s2-row{margin:0;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} html.fs-skin2 .fs-landing .s2-row a{justify-content:center;gap:8px;min-height:76px;box-sizing:border-box;padding:8px 4px;border-radius:18px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 2px 0 var(--s2-lip);font-size:12px} html.fs-skin2 .fs-landing .s2-row-ic{width:auto;height:auto;border:0;border-radius:0;background:transparent;box-shadow:none} html.fs-skin2 .fs-landing .s2-row .s2-row-ic svg{width:22px;height:22px} html.fs-skin2 .fs-landing .s2-row :is(.fs-new-badge,.fs-live-badge){top:8px;right:8px;left:auto} html.fs-skin2 .fs-landing .s2-row.s2-row-wrap{display:flex;flex-wrap:wrap;justify-content:center} /* 7칸: 4+3, 둘째 줄은 가운데(3칸 격자면 마지막 줄에 하나만 남는다) */ html.fs-skin2 .fs-landing .s2-row-wrap a{flex:0 0 calc((100% - 30px) / 4)} html.fs-skin2 .fs-landing .s2-row-wrap .s2-row-ic{width:auto;aspect-ratio:auto} } @container (min-width:1100px){ html.fs-skin2 .fs-landing .s2-home{gap:20px} html.fs-skin2 .fs-landing .s2-hero{min-height:380px;padding:30px 32px} html.fs-skin2 .fs-landing :is(.s2-hero-disc-m,.s2-hero-disc-t){display:none} html.fs-skin2 .fs-landing .s2-hero-disc-pc{display:block} html.fs-skin2 .fs-landing .s2-hero-eyebrow{font-size:15px} html.fs-skin2 .fs-landing .s2-hero-title{margin-bottom:24px;font-size:42px;letter-spacing:-1px} html.fs-skin2 .fs-landing .s2-hero-btns{display:flex;flex-wrap:wrap;gap:12px;max-width:none} html.fs-skin2 .fs-landing .s2-btn{min-height:60px;padding:6px 24px} html.fs-skin2 .fs-landing .s2-btn-gold{min-width:220px;font-size:18px} html.fs-skin2 .fs-landing .s2-btn-ghost{min-width:170px;font-size:16px} html.fs-skin2 .fs-landing .s2-tile-lobby{padding:18px} html.fs-skin2 .fs-landing .s2-tile-lobby .s2-disc.s2-disc-lg{width:50px;height:50px} html.fs-skin2 .fs-landing .s2-tile-lobby .s2-tile-title{font-size:22px} html.fs-skin2 .fs-landing .s2-tile-ai{gap:24px;padding:22px 24px} html.fs-skin2 .fs-landing .s2-tile-ai .s2-disc.s2-disc-lg{width:54px;height:54px} html.fs-skin2 .fs-landing .s2-tile-ai .s2-tile-title{font-size:22px} html.fs-skin2 .fs-landing .s2-tile-ai-txt small{font-size:14px} html.fs-skin2 .fs-landing .s2-board{width:200px;height:200px} html.fs-skin2 .fs-landing .s2-board-cell .s2-disc-b,html.fs-skin2 .fs-landing .s2-board-cell .s2-disc-w{width:32px;height:32px} html.fs-skin2 .fs-landing .s2-board-ev{font-size:17px} html.fs-skin2 .fs-landing .s2-row a{min-height:84px;font-size:13px} } /* ── 앱 셸 하단 탭(app.php·탭바 있는 페이지): 선택 탭 아이콘 뒤 알약 배경. 아이콘·이름 간격을 2px → 6px 로 벌리고 위아래 안쪽 여백을 같은 만큼 줄여 탭바 높이는 그대로, 알약이 이름에 닿지 않는다(2026-10-25 지적) ── */ html.fs-skin2 .fs-tab{gap:6px;padding-top:5px;padding-bottom:3px} html.fs-skin2 .fs-tab.is-active{color:var(--s2-accent)} html.fs-skin2 .fs-tab-ic{position:relative;z-index:0} html.fs-skin2 .fs-tab.is-active .fs-tab-ic::before{content:"";position:absolute;z-index:-1;top:-3px;bottom:-3px;left:-15px;right:-15px;border-radius:999px;background:var(--s2-accent-tint)} /* ── 퍼즐 홈(puzzle.php → _puzzle_skin2.php): 시안 "새 스타일 시안" 퍼즐·"PC 웹" 퍼즐 ───────────────── 순서: 머리줄(퍼즐·종합) → 프로필 → 스프린트 배너 → '모드' 카드 → 내 게임에서 배우기 → 내 기록(요약). s2-* 클래스만 쓴다(구 레이아웃 CSS 와 무관). 넓은 배치는 .s2-pz-layout 폭 720px 이상(@container)일 때 왼쪽 단(프로필·내 기록)·오른쪽 단. 웹 사이트 틀의 h1·h2 남색 바·파란 링크 규칙(play.css)을 여기서 되돌린다. */ html.fs-skin2{--s2-accent-card-lip:#b5c3f6;--s2-live:#8b5cf6} html.fs-skin2.fs-app-theme-dark{--s2-accent-card-lip:#0a1130;--s2-live:#a78bfa} html.fs-skin2 body:has(> .wrap.s2-puzzle){background:var(--s2-bg)} html.fs-skin2 .wrap.s2-puzzle{max-width:1200px;color:var(--s2-text)} /* 웹(사이트 틀 안): 랜딩과 같은 회색 판(2026-10-25 "pc에서 퍼즐이 배경색이 달라"). 구 웹 규칙 .wrap{padding:0!important;margin-top:8px} 를 덮는다 */ html.fs-skin2 .wrap.s2-puzzle.s2-web{margin-top:0;padding:0 16px 24px!important;background:var(--s2-bg)} @media (min-width:768px){html.fs-skin2 .wrap.s2-puzzle.s2-web{padding:0 24px 32px!important}} /* 2단 웹 여백 = 로비 24px(2026-10-26) */ /* 앱 다크 공용 링크 규칙(app-theme.css, color:var(--fs-app-link)!important)이 새 링크를 링크색으로 칠한다. 변수만 다시 정한다(규칙: 변수 재정의) */ html.fs-skin2 .s2-pz-sprint{--fs-app-link:#fff} html.fs-skin2 .s2-pz-learn,html.fs-skin2 .s2-pz-rank{--fs-app-link:var(--s2-text)} html.fs-skin2 .s2-pz-login{--fs-app-link:var(--s2-accent)} html.fs-skin2 .wrap.s2-puzzle>.s2-pz-layout{flex:1 0 auto;width:100%;max-width:none!important;container-type:inline-size} html.fs-skin2 .s2-pz-head,html.fs-skin2 .s2-pz-cols{max-width:none;margin-left:auto;margin-right:auto} /* 1단도 폭을 다 쓴다(로비와 같게, 2026-10-26. 예전 560px) */ html.fs-skin2 .wrap.s2-puzzle>:not(.pz-title-bar):not(#ocAutoMatchWebSlot){max-width:none} /* puzzle.php 웹 560px 가운데 규칙 해제 */ html.fs-skin2 .s2-pz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 12px 4px} /* 제목 위 16px·26px: 로비 제목줄과 같게(2026-10-25) */ html.fs-skin2 .s2-pz-head .s2-pz-title{display:block;height:auto;margin:0;padding:0;background:none;color:var(--s2-text);font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.2;text-align:left} html.fs-skin2 .s2-pz-composite{display:inline-flex;align-items:baseline;gap:6px;flex:none;margin:-6px 0;padding:8px 14px;border-radius:999px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 2px 0 var(--s2-lip);color:var(--s2-muted);--fs-app-link:var(--s2-muted);font-size:12px;font-weight:700;text-decoration:none!important} /* 링크(종합 리더보드): 앱 링크색은 변수로 같은 회색 */ html.fs-skin2 .s2-pz-composite b{color:var(--s2-text);font-size:20px;font-weight:450;font-variant-numeric:tabular-nums} html.fs-skin2 .s2-pz-layout .s2-q{margin-left:1px;color:var(--s2-muted);font-size:.6em;font-weight:700} html.fs-skin2 .s2-pz-layout a{text-decoration:none} html.fs-skin2 .s2-pz-layout .s2-sec{display:block;height:auto;margin:10px 4px -2px;padding:0;background:none;color:var(--s2-muted);font-size:13px;font-weight:800;letter-spacing:.2px;line-height:1.2;text-align:left} /* 좁은 배치: 두 단을 풀어 한 줄로(순서만 정함). 프로필 → 내 기록 → 모드 → 스프린트 → 배우기(2026-10-25 사용자 지시: 기록 카드를 모드 위로, 스프린트를 배우기 바로 위로). 넓은 배치도 같은 order 로 오른쪽 단이 모드 → 스프린트 → 배우기(같은 날 PC 도 같게) */ html.fs-skin2 .s2-pz-cols{display:flex;flex-direction:column;gap:12px;padding-bottom:16px} html.fs-skin2 .s2-pz-side,html.fs-skin2 .s2-pz-main{display:contents} html.fs-skin2 .s2-pz-profile{order:1} html.fs-skin2 .s2-pz-record{order:2} html.fs-skin2 .s2-pz-main>.s2-sec{order:3} html.fs-skin2 .s2-pz-modes{order:4} html.fs-skin2 .s2-pz-sprint{order:5} html.fs-skin2 .s2-pz-learn{order:6} /* 프로필: 사진 / 국기·닉네임·메시지·닉 이력 / 가입일 · 마지막 접속 / 자기소개 + 오른쪽 순위 */ html.fs-skin2 .s2-pz-profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 .s2-pz-photo{width:52px;height:52px;flex:none;border-radius:16px;object-fit:cover;background:var(--s2-chip)} html.fs-skin2 .s2-pz-initial{display:flex;align-items:center;justify-content:center;color:var(--s2-text);font-size:22px;font-weight:800;line-height:1} html.fs-skin2 .s2-pz-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} html.fs-skin2 .s2-pz-nick{display:flex;align-items:center;gap:5px;min-width:0;color:var(--s2-text);font-size:16px;font-weight:800;line-height:1.25} html.fs-skin2 .s2-pz-nick .mg-user-popup__nick-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.fs-skin2 .s2-pz-nick .mg-user-popup__verified-trigger{display:inline-flex;align-items:center;gap:4px;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer} html.fs-skin2 .s2-pz-nick .mg-user-popup__memo-link{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;margin:0;padding:0;border:0;background:none;color:var(--s2-muted);cursor:pointer} html.fs-skin2 .s2-pz-nick .mg-user-popup__memo-link svg{width:16px;height:16px} html.fs-skin2 .s2-pz-sub{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;color:var(--s2-muted);font-size:12px;line-height:1.35} html.fs-skin2 .s2-pz-sub b{color:var(--s2-text);font-weight:700} html.fs-skin2 .s2-pz-joined{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:default} html.fs-skin2 button.s2-pz-joined{cursor:pointer} html.fs-skin2 .s2-pz-rank{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none} html.fs-skin2 .s2-pz-rank>span{color:var(--s2-muted);font-size:11px;font-weight:700} html.fs-skin2 .s2-pz-rank a{color:var(--s2-text)!important;font-size:17px;font-weight:700;text-decoration:underline!important;text-underline-offset:3px} /* 순위는 모두 밑줄 + 누르면 그 종목 리더보드(종합 순위·모드 카드·스프린트, 순위 없으면 '-', 2026-10-26 사용자 지시) */ html.fs-skin2 .s2-pz-rank-link{text-decoration:underline;text-underline-offset:3px;cursor:pointer} html.fs-skin2 .s2-pz-rank-link:focus-visible{outline:2px solid var(--s2-accent);outline-offset:2px;border-radius:4px} /* 스프린트: 보드 배너 + 금색 시작 */ html.fs-skin2 .s2-pz-sprint{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;color:#fff!important;box-shadow:0 4px 0 var(--s2-hero-lip);transition:transform .08s ease,box-shadow .08s ease} html.fs-skin2 .s2-pz-sprint:active{transform:translateY(2px);box-shadow:0 2px 0 var(--s2-hero-lip)} /* 아이콘·제목·점수·순위는 위 모드 카드와 같은 크기(2026-10-26 사용자 지시): 아이콘 42px(넓은 칸 48), 제목 16px(18), 점수 = 모드 레이팅 24px(27)·600, 순위 = 모드 #순위 13px·700 */ html.fs-skin2 .s2-pz-sprint-disc{width:42px;height:42px} html.fs-skin2 .s2-pz-sprint-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} html.fs-skin2 .s2-pz-sprint-copy strong{font-size:16px;font-weight:900;line-height:1.25} html.fs-skin2 .s2-pz-sprint-copy small{font-size:12px;font-weight:700;opacity:.85;color:#fff!important} /* 앱 다크 small 회색(!important)보다 세게: 초록 배너 위 흐림 방지 */ html.fs-skin2 .s2-pz-sprint-copy small{display:flex;align-items:baseline;gap:6px} html.fs-skin2 .s2-pz-sprint-copy small b{font-size:24px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums} /* 최고 점수 = 모드 레이팅 크기('최고' 글자는 그대로) */ html.fs-skin2 .s2-pz-sprint-copy small .s2-pz-sprint-rank{margin-left:4px;font-size:13px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums} /* 순위 = 모드 #순위 크기 */ /* 스프린트를 고르면(기록 상자가 스프린트) 모드 카드와 같은 강조: 가장자리 안쪽 2px 파란 테두리 + 파란 계열 아래 두께(바깥 외곽선은 둥글기·두께와 어긋나 뺌) */ html.fs-skin2 .s2-pz-sprint.is-current{box-shadow:inset 0 0 0 2px var(--s2-accent),0 4px 0 var(--s2-accent-card-lip)} html.fs-skin2 .s2-pz-sprint.is-current:active{box-shadow:inset 0 0 0 2px var(--s2-accent),0 2px 0 var(--s2-accent-card-lip)} /* 회원은 모드 카드처럼 고른 때만 '시작'(2026-10-25 사용자 지시). 자리는 남겨 배너 높이·인원 위치가 그대로다. 비회원은 고르기가 없어 늘 보인다 */ html.fs-skin2 .s2-pz-sprint.is-pickable:not(.is-current) .s2-pz-sprint-go{visibility:hidden} /* 벨벳 위 풀이 인원: 랜딩 플레이 영역 인원 줄과 같은 어두운 반투명 알약 + 같은 보라 닷·흰 숫자(연보라는 녹색에 묻혔다, 2026-10-25) */ /* 벨벳 위: 닷·숫자 모두 랜딩 플레이 영역 인원 줄의 풀이 닷 색(#a78bfa), 크기는 모드 카드와 같게(아래 공용 규칙) */ html.fs-skin2 .s2-pz-sprint .s2-pz-live{position:absolute;top:10px;right:12px;margin:0;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.26);color:#a78bfa;font-size:13px;font-weight:700;line-height:1.2} /* 오른쪽 위 모서리(모드 카드 풀이 인원 자리와 같은 쪽, 2026-10-26 사용자 지시). 시작 버튼은 오른쪽 아래 */ html.fs-skin2 .s2-pz-learn .s2-pz-live{font-size:14px} /* 기존 배우기 버튼 14px */ html.fs-skin2 .s2-pz-sprint .s2-pz-live::before{background:#a78bfa} html.fs-skin2 .s2-pz-sprint-go{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:flex-end;min-height:28px;box-sizing:border-box;padding:0 12px;border-radius:10px;background:var(--s2-cta);color:var(--s2-cta-ink);font-size:13px;font-weight:900;line-height:1;box-shadow:0 3px 0 var(--s2-cta-lip)} /* 모드 카드 시작 버튼과 같은 크기, 오른쪽 아래(2026-10-26 사용자 지시) */ /* 풀이 중 인원: 보라 닷 + 같은 보라 숫자(예전 퍼즐 카드 .puzzle-card__playing 처럼, 2026-10-25). 0명이면 자리만 둔다(스크립트가 is-empty) */ html.fs-skin2 .s2-pz-live{display:inline-flex;align-items:center;gap:5px;flex:none;color:var(--s2-live);font-size:15px;font-weight:700;line-height:1} /* 크기·두께·간격은 기존 퍼즐 카드(.puzzle-card__playing 15px·700·5px, 폰 배율 1) 그대로(2026-10-25 사용자 지시) */ html.fs-skin2 .s2-pz-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s2-live)} /* 스프린트·모드 카드·배우기 같은 크기 */ html.fs-skin2 .s2-pz-live.is-empty{visibility:hidden} /* 모드 카드: 돌 아이콘·풀이 중 / 이름 / 문제 수 / 내 레이팅. 지금 '내 기록' 종목은 강조 */ html.fs-skin2 .s2-pz-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html.fs-skin2 .s2-pz-mode{appearance:none;-webkit-appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ic lv" "nm nm" "ct rk" "rt go";align-items:center;justify-items:start;min-width:0;margin:0;padding:14px;border-radius:22px;background:var(--s2-surface);border:2px solid var(--s2-line);box-shadow:0 3px 0 var(--s2-lip);color:var(--s2-text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s ease,box-shadow .08s ease} html.fs-skin2 .s2-pz-mode:active{transform:translateY(2px);box-shadow:0 1px 0 var(--s2-lip)} html.fs-skin2 .s2-pz-mode.is-current{background:var(--s2-accent-tint);border-color:var(--s2-accent);box-shadow:0 3px 0 var(--s2-accent-card-lip)} html.fs-skin2 .s2-pz-mode.is-disabled{opacity:.58;cursor:default} html.fs-skin2 .s2-pz-mode-ic{grid-area:ic;width:42px;height:42px;margin-bottom:10px} /* 풀이 닷은 늘 오른쪽 끝: 고른 카드에 '시작'이 생기면 오른쪽 칸이 넓어져 왼쪽 정렬이던 닷이 움직였다(2026-10-25) */ html.fs-skin2 .s2-pz-mode .s2-pz-live{grid-area:lv;align-self:start;justify-self:end;margin-top:0} /* 랜딩 퍼즐 타일처럼 위쪽에 */ html.fs-skin2 .s2-pz-mode-name{grid-area:nm;max-width:100%;font-size:16px;font-weight:900;line-height:1.25;overflow-wrap:anywhere} html.fs-skin2 .s2-pz-mode-count{grid-area:ct;margin-top:2px;color:var(--s2-muted);font-size:12px} html.fs-skin2 .s2-pz-mode-rating{grid-area:rt;margin-top:10px;color:var(--s2-muted);font-size:24px;font-weight:450;line-height:1;font-variant-numeric:tabular-nums} html.fs-skin2 .s2-pz-mode-rating .s2-q{font-size:13px} html.fs-skin2 .s2-pz-mode-rank{grid-area:rk;justify-self:end;margin:2px 0 0 8px;color:var(--s2-muted);font-size:13px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums} /* 종목 순위 #n: 문제 수 줄 오른쪽 */ html.fs-skin2 .s2-pz-mode-go{grid-area:go;align-self:end;justify-self:end;display:none;align-items:center;justify-content:center;min-height:28px;box-sizing:border-box;padding:0 12px;border-radius:10px;background:var(--s2-cta);color:var(--s2-cta-ink);font-size:13px;font-weight:900;line-height:1;box-shadow:0 3px 0 var(--s2-cta-lip)} html.fs-skin2 .s2-pz-mode.is-current .s2-pz-mode-go{display:inline-flex} /* 오른쪽 끝을 위 순위(#n)·풀이 인원과 맞춘다(justify-self:end, 2026-10-25) */ /* 내 게임에서 배우기 */ html.fs-skin2 .s2-pz-learn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:var(--s2-surface);border:1px dashed var(--s2-line);box-shadow:0 3px 0 var(--s2-lip);color:var(--s2-text)!important} html.fs-skin2 .s2-pz-learn-ic{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--s2-gold-tint);color:var(--s2-gold)} html.fs-skin2 .s2-pz-learn-ic svg{width:24px;height:24px} html.fs-skin2 .s2-pz-learn-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} html.fs-skin2 .s2-pz-learn-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px} html.fs-skin2 .s2-pz-learn-title strong{font-size:15px;font-weight:800;line-height:1.25} html.fs-skin2 .s2-new{display:inline-block;padding:2px 6px;border-radius:6px;background:#e11d48;color:#fff;font-size:10px;font-weight:800;line-height:1.2} html.fs-skin2 .s2-pz-learn-copy small{color:var(--s2-muted);font-size:12px;line-height:1.35} html.fs-skin2 .s2-pz-chev{width:20px;height:20px;flex:none;color:var(--s2-muted)} /* 내 기록(요약): '{종목} 기록' + 전체 보기 / 레이팅·최고·오늘 / 전적 막대(누르면 풀이 기록 목록) */ html.fs-skin2 .s2-pz-record{padding:16px;border-radius:22px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 .s2-pz-record-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} html.fs-skin2 .s2-pz-record-head h2{display:block;height:auto;min-width:0;margin:0;padding:0;background:none;color:var(--s2-text);font-size:15px;font-weight:900;line-height:1.3;text-align:left} html.fs-skin2 .s2-pz-record-all{flex:none;margin:0;padding:4px 0;border:0;background:none;color:var(--s2-accent);font:inherit;font-size:12px;font-weight:800;cursor:pointer} html.fs-skin2 .s2-rec-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} html.fs-skin2 .s2-rec-tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px;border-radius:14px;background:var(--s2-surface2)} html.fs-skin2 .s2-rec-tile>span{color:var(--s2-muted);font-size:11px;font-weight:700} html.fs-skin2 .s2-rec-tile>b{font-size:20px;font-weight:450;line-height:1.1;font-variant-numeric:tabular-nums} /* 퍼즐 홈 레이팅 글자 두께 600(2026-10-25 사용자 지시 "좀 더 두껍게", 450 에서): 종합 칩·기록 칸·모드 카드. 값 안의 .s2-rt(전역 450)까지 같이 */ html.fs-skin2 .s2-pz-composite b,html.fs-skin2 .s2-pz-mode-rating,html.fs-skin2 .s2-rec-tile>b, html.fs-skin2 :is(.s2-pz-composite,.s2-pz-mode-rating,.s2-rec-tile) .s2-rt{font-weight:600} html.fs-skin2 .s2-rec-tile>b:not([class]){color:var(--s2-text)} html.fs-skin2 .s2-rec-tile.is-gold{background:var(--s2-gold-tint)} html.fs-skin2 .s2-rec-tile.is-gold>span{color:var(--s2-gold)} html.fs-skin2 .s2-rec-record{display:flex;flex-direction:column;gap:6px;width:100%;margin:16px 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left} html.fs-skin2 button.s2-rec-record{cursor:pointer} html.fs-skin2 .s2-rec-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px} html.fs-skin2 .s2-rec-lb{color:var(--s2-muted);font-size:12px;font-weight:700} html.fs-skin2 .s2-rec-lb b{font-weight:700;font-variant-numeric:tabular-nums} html.fs-skin2 .s2-rec-lb b:not(.s2-rt){color:var(--s2-text)} /* 레이팅(스프린트 최고 난이도)은 단계 색 */ html.fs-skin2 .s2-rec-pct{color:var(--s2-accent);font-size:14px;font-weight:800} html.fs-skin2 .s2-rec-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--s2-line)} html.fs-skin2 .s2-rec-bar i{background:var(--s2-accent)} html.fs-skin2 .s2-pz-record-msg,html.fs-skin2 .s2-pz-record-body .record-empty{padding:10px 0;color:var(--s2-muted);font-size:13px;text-align:center} html.fs-skin2 .s2-pz-login{margin-left:8px;color:var(--s2-accent)!important;font-weight:800} /* 넓은 배치: .s2-pz-layout 폭 기준(웹 사이트 틀 안 PC 본문 칸은 800~900px). ① 720px 이상: 왼쪽 단(프로필·내 기록) + 오른쪽 단(스프린트·모드 2×2·배우기) ② 1000px 이상: 시안 PC 크기, 모드 한 줄 4칸 */ /* 2단 기준 = 화면 폭 768px 이상(네 페이지 공통, 2026-10-26. 예전 .s2-pz-layout 폭 720px) */ @media (min-width:768px){ html.fs-skin2 .s2-pz-head,html.fs-skin2 .s2-pz-cols{max-width:none} html.fs-skin2 .s2-pz-head{padding:16px 0 22px} html.fs-skin2 .s2-pz-cols{display:grid;grid-template-columns:minmax(260px,min(380px,38%)) minmax(0,1fr);gap:20px;align-items:start} html.fs-skin2 .s2-pz-side{display:flex;flex-direction:column;gap:14px;min-width:0} html.fs-skin2 .s2-pz-main{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0} /* '모드' 제목은 오른쪽 단 바로 위 빈 자리로 올려 모드 카드 윗변을 왼쪽 프로필 카드 윗변과 맞춘다(2026-10-25 사용자 지시). 머리줄 아래 여백이 그 자리 */ html.fs-skin2 .s2-pz-main>.s2-sec{position:absolute;left:4px;bottom:100%;margin:0 0 6px!important} html.fs-skin2 .s2-pz-profile{padding:14px} html.fs-skin2 .s2-pz-sprint{gap:16px;padding:18px 20px;border-radius:24px} html.fs-skin2 .s2-pz-sprint-copy small{font-size:13px} } @container (min-width:1000px){ html.fs-skin2 .s2-pz-head{padding:16px 0 24px} html.fs-skin2 .s2-pz-cols{gap:24px} html.fs-skin2 .s2-pz-main{gap:16px} html.fs-skin2 .s2-pz-profile{padding:16px} html.fs-skin2 .s2-pz-photo{width:64px;height:64px;border-radius:18px} html.fs-skin2 .s2-pz-sub{font-size:13px} html.fs-skin2 .s2-pz-layout .s2-sec{margin:6px 0 0;font-size:14px} html.fs-skin2 .s2-pz-sprint{gap:18px;padding:22px 24px} html.fs-skin2 .s2-pz-sprint-disc{width:48px;height:48px} html.fs-skin2 .s2-pz-sprint-copy strong{font-size:18px} html.fs-skin2 .s2-pz-sprint-copy small b{font-size:27px} html.fs-skin2 .s2-pz-sprint-copy small{font-size:14px} html.fs-skin2 .s2-pz-modes{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} html.fs-skin2 .s2-pz-mode{padding:18px} html.fs-skin2 .s2-pz-mode-ic{width:48px;height:48px;margin-bottom:14px} html.fs-skin2 .s2-pz-mode-name{font-size:18px} html.fs-skin2 .s2-pz-mode-count{font-size:13px} html.fs-skin2 .s2-pz-mode-rating{margin-top:14px;font-size:27px} /* 2026-10-25 "조금만 더 작게"(32→27, 좁은 배치 28→24) */ html.fs-skin2 .s2-pz-learn{gap:14px;padding:16px 18px} html.fs-skin2 .s2-pz-learn-ic{width:48px;height:48px} html.fs-skin2 .s2-pz-learn-title strong{font-size:17px} html.fs-skin2 .s2-pz-learn-copy small{font-size:13px} html.fs-skin2 .s2-pz-record-head h2{font-size:16px} html.fs-skin2 .s2-pz-record-all{font-size:13px} } /* ── 로비(online.php 목록 화면, 관리자 미리보기): 시안 "새 스타일 시안" 로비·"PC 웹" 로비 ─────────────────────── 대국방·대국 결과·접속자·리더보드 안쪽 구성(행 마크업·배지·글자)은 기존 그대로(사용자 지시), 바깥 배치·카드·버튼·색만 바꾼다. 로비는 마크업을 거의 그대로 두고 CSS 만 덮는다(스크립트가 그리는 목록이 많다). 전환 때는 이 절을 online.page.css 로 옮기고 덮인 구 규칙을 지운다. 게임방(#obBoardView·방 모드 제목줄)은 건드리지 않는다. 넓은 배치는 .pz-container.s2-wide(online.php 스크립트) */ /* 바탕: 앱은 문서 전체, 웹은 본문 칸만 회색 판 */ html.fs-skin2:is(.fs-online-app,.fs-embed) body:has(#obListView):not(.fs-room-mode){background:var(--s2-bg)} html.fs-skin2 body:not(.fs-room-mode) .pz-container:has(#obListView){background:var(--s2-bg);padding-bottom:20px} /* 웹: 회색 판 안쪽 좌우 여백(카드가 판 끝에 붙지 않게, 2026-10-25 지적). 제목줄도 같은 선 */ html.fs-skin2:not(.fs-online-app):not(.fs-embed) body:not(.fs-room-mode) .pz-container:has(#obListView){padding-left:16px;padding-right:16px} @media (min-width:768px){html.fs-skin2:not(.fs-online-app):not(.fs-embed) body:not(.fs-room-mode) .pz-container:has(#obListView){padding-left:24px;padding-right:24px} html.fs-skin2:not(.fs-online-app):not(.fs-embed) body:not(.fs-room-mode) #pzTitleBar{padding-left:28px;padding-right:24px}} html.fs-skin2:not(.fs-online-app):not(.fs-embed) body:not(.fs-room-mode) #pzTitleBar{background:var(--s2-bg)!important} html.fs-skin2 body:not(.fs-room-mode) #main-wrap>.container:has(#obListView){padding-top:0!important;padding-left:0!important;padding-right:0!important;overflow-x:clip} /* 목록 화면만(대국 화면 ?room=N 은 같은 문서라 건드리지 않게, 2026-10-25 공개 때) */ html.fs-skin2 body:not(.fs-room-mode) .contentsAll:has(#obListView){margin-top:0!important} /* 제목줄(목록 화면만): 퍼즐 홈 머리줄과 같은 큰 제목 */ html.fs-skin2 body:not(.fs-room-mode) #pzTitleBar{height:auto!important;min-height:56px;margin-bottom:0!important;padding:16px 16px 8px 20px;background:var(--s2-bg)!important;color:var(--s2-text);font-size:26px;font-weight:900;line-height:1.2;overflow:visible} html.fs-skin2 body:not(.fs-room-mode) #pzTitleBar #pzTitle,html.fs-skin2 body:not(.fs-room-mode) #pzTitleBar #pzTitle a{color:var(--s2-text)!important;font-size:inherit;font-weight:900;letter-spacing:-.6px;line-height:1.2;text-decoration:none} /* 제목줄 인원 칩(접속·게임·풀이, online.php 스크립트가 접속자 표에서 센다). 좁으면 숫자만. 글자 두께·색은 시안(800, 본문색, 2026-10-25 사용자 지시) */ html.fs-skin2 #pzTitleBar .s2-lobby-chip{display:inline-flex;align-items:center;gap:10px;flex:none;margin-left:auto;padding:7px 12px;border-radius:999px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 2px 0 var(--s2-lip);color:var(--s2-text);font-size:12px;font-weight:800;line-height:1;letter-spacing:0} html.fs-skin2 #pzTitleBar .s2-lobby-chip[hidden],html.fs-skin2 body.fs-room-mode #pzTitleBar .s2-lobby-chip{display:none!important} html.fs-skin2 .s2-lc-item{display:inline-flex;align-items:center;gap:4px} html.fs-skin2 .s2-lc-item svg{width:14px;height:14px} html.fs-skin2 .s2-lc-item b{color:var(--s2-text);font-weight:800;font-variant-numeric:tabular-nums} html.fs-skin2 .s2-lc-dot{display:inline-block;width:8px;height:8px;border-radius:50%} html.fs-skin2 .s2-lc-dot.is-game{background:#f97316}html.fs-skin2 .s2-lc-dot.is-puzzle{background:var(--s2-live)} html.fs-skin2 .s2-lc-lb{display:none} @media (min-width:768px){html.fs-skin2 .s2-lc-lb{display:inline}html.fs-skin2 #pzTitleBar .s2-lobby-chip{font-size:13px}} /* 아레나 줄: 금색 제목·물음표·데일리/유저 탭 */ html.fs-skin2 #obListView .ob-arena-list-head{align-items:center} html.fs-skin2 #obListView .ob-arena-list-title,html.fs-skin2 #obListView .ob-arena-list-title:link,html.fs-skin2 #obListView .ob-arena-list-title:visited{color:var(--s2-gold)!important;font-size:16px;font-weight:900} html.fs-skin2 #obListView .ob-arena-title-icon{color:var(--s2-gold)} /* 물음표(데일리 아레나·리그 '주간 리그란?' 같은 .ob-arena-guide-link): 모양은 아레나 쪽(옅은 테두리·흰 바탕·흐린 글자), 크기는 리그 쪽 기존 값(원 18px·글자 11px)으로 통일(2026-10-26 사용자 지시) */ html.fs-skin2 .ob-arena-guide-link{flex-basis:18px;width:18px;height:18px;border:1.5px solid var(--s2-line);border-radius:50%;background:var(--s2-surface);color:var(--s2-muted);font-size:11px;font-weight:800} html.fs-skin2 #obListView .ob-arena-list-head .ob-arena-guide-link{flex-basis:20px;width:20px;height:20px;font-size:12px} /* 데일리 아레나 옆은 제목 글자만큼(16px 제목 줄 높이, 2026-10-26 사용자 지시) */ html.fs-skin2 .pz-container.s2-wide #obListView .ob-arena-list-head .ob-arena-guide-link{flex-basis:22px;width:22px;height:22px;font-size:13px} /* 넓은 배치 제목 18px */ html.fs-skin2 .ob-arena-guide-link:hover{border-color:var(--s2-accent);background:var(--s2-surface);color:var(--s2-accent)} /* 세그먼트 탭(아레나 데일리/유저, 리더보드 리그/주간/전체). 다크 공용 !important(배경·테두리)보다 세게 */ html.fs-skin2 .ob-leaderboard-tabs{padding:3px;border:0;border-radius:11px;background:var(--s2-chip)} /* 탭 26px(2026-10-26 사용자 지시로 30px에서 낮춤, 넓은 배치 아레나 탭도 26px) */ html.fs-skin2 .ob-leaderboard-tabs .ob-leaderboard-tab{min-height:26px;padding:0 12px;border:0!important;border-radius:9px;background:transparent!important;color:var(--s2-muted)!important;font-size:12px;font-weight:700} html.fs-skin2 .ob-leaderboard-tabs .ob-leaderboard-tab.is-active{background:var(--s2-surface)!important;color:var(--s2-text)!important;font-weight:800;box-shadow:0 1px 2px rgba(17,21,34,.12)} /* 아레나 카드: 지금 회차(#obArenaCard)는 어두운 이벤트 카드, 지난 회차는 흰 카드. 안쪽 구성은 그대로. 카드 사이 12px·카드와 빠른 버튼 사이 16px(시안 간격, 2026-10-25 지적): 카드 바깥 여백 대신 묶음 간격으로 둔다(빈 지난 회차 칸은 숨겨 간격이 생기지 않게) */ html.fs-skin2 #obListView #obArenaCards{display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px;column-gap:14px} html.fs-skin2 #obListView #obArenaCards>.ob-arena-list-head{margin:4px 0 -2px} html.fs-skin2 #obListView #obArenaExtraCards{display:flex;flex-direction:column;gap:12px} /* 유저 토너먼트 목록도 같은 카드(.ob-arena-card)라 바깥 여백 대신 목록 간격 12px, 만들기 줄 아래 12px(시안) */ html.fs-skin2 #obListView .ob-tournament-list{gap:12px} html.fs-skin2 #obListView .ob-tournament-toolbar{margin:0 0 12px} html.fs-skin2 #obListView #obArenaExtraCards:not(:has(.ob-arena-card:not([hidden]))){display:none} html.fs-skin2 #obListView>#pzPanel{margin-top:16px} /* 대국방 제목 위 = 대국 결과 제목 위(18px, 2026-10-26 사용자 지시): 세 버튼 줄 아래 10px(인라인)·패널 아래 8px 가 제목 여백에 더해졌다 */ html.fs-skin2 #obListView>#pzPanel{margin-bottom:0} html.fs-skin2 #obListView #obQuickActionRow{margin-bottom:0!important} /* 1단: 리더보드 제목 위도 접속자·대국방·대국 결과와 같은 18px(2026-10-26 사용자 지시). 오른쪽 칸의 줄 간격 16px·인라인 위 여백 16px·위 안쪽 8px 를 뺀다 */ @media (max-width:767.98px){html.fs-skin2 body:not(.fs-room-mode) .pz-container:has(#obListView)>.row>.pz-col-rank{margin-top:0!important;padding-top:0!important}} /* 1단 목록 제목 위 여백 23px(2026-10-26 사용자 지시 '전체 5px 더'): 대국방·대국 결과·리더보드 23px, 접속자는 카드 윗선이 곧 제목줄이라(다른 제목은 글자가 먼저 온다) 좁아 보여 4px 더(27px) */ @media (max-width:767.98px){ html.fs-skin2 body:not(.fs-room-mode) #obListView>.ob-list-head,html.fs-skin2 body:not(.fs-room-mode) #obListView .ob-recent-fallback-title{margin-top:23px!important} html.fs-skin2 body:not(.fs-room-mode) .pz-leaderboard-card .ob-leaderboard-head{margin-top:23px!important} html.fs-skin2 body:not(.fs-room-mode) #obListView>.ob-online-users-block .ob-online-users-head{margin-top:27px!important} } html.fs-skin2 #obListView .ob-arena-card{margin:0;padding:14px 16px;border:1px solid var(--s2-line);border-radius:20px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip);transform:none} @media(hover:hover){html.fs-skin2 #obListView .ob-arena-card:hover{border-color:var(--s2-accent);box-shadow:0 3px 0 var(--s2-lip);transform:none}} html.fs-skin2 #obListView .ob-arena-title{font-size:16px;font-weight:900} /* 칸 재배치: 머리·머리 안쪽·버튼 묶음을 풀어(display:contents) 카드 격자에 바로 놓는다. 마크업·스크립트 연결점은 그대로 */ html.fs-skin2 #obListView .ob-arena-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head count" "meta cd" "status status" "acts acts" "medal medal" "stand stand";column-gap:12px;align-items:center} html.fs-skin2 #obListView .ob-arena-card :is(.ob-arena-head,.ob-arena-heading,.ob-arena-head-controls){display:contents} html.fs-skin2 #obListView .ob-arena-card .ob-arena-heading-main{grid-area:head;min-width:0;flex-wrap:wrap} html.fs-skin2 #obListView .ob-arena-card .ob-arena-participants-count{grid-area:count;justify-self:end} html.fs-skin2 #obListView .ob-arena-card .ob-arena-metarow{grid-area:meta;min-width:0;margin:8px 0 0} html.fs-skin2 #obListView .ob-arena-card .ob-arena-status{grid-area:status;margin-top:6px} html.fs-skin2 #obListView .ob-arena-card .ob-arena-status:empty{display:none} html.fs-skin2 #obListView .ob-arena-card .ob-arena-medalists{grid-area:medal;margin-top:8px} html.fs-skin2 #obListView .ob-arena-card .ob-arena-standings-wrap{grid-area:stand;margin-top:10px} html.fs-skin2 #obListView .ob-arena-card .ob-arena-actions{grid-area:acts;display:flex;flex-wrap:nowrap;gap:8px;margin:14px 0 0} html.fs-skin2 #obListView .ob-arena-card .ob-arena-actions:empty{display:none} html.fs-skin2 #obListView .ob-arena-card .ob-arena-actions .pz-btn{flex:1 1 0;min-width:0;min-height:48px;padding:0 12px;border-radius:16px;font-size:15px} html.fs-skin2 #obListView .ob-arena-card .s2-arena-cd{grid-area:cd;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-top:8px} html.fs-skin2 #obListView .ob-arena-card .s2-arena-cd[hidden]{display:none} html.fs-skin2 #obListView .ob-arena-card .s2-arena-cd-lb{color:#b6bed0;font-size:11px;font-weight:700;white-space:nowrap} html.fs-skin2 #obListView .ob-arena-card .s2-arena-cd-tm{color:var(--s2-cta);font-size:25px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums} /* 흰 카드(지난·다음 회차)에 남은 시간이 있을 때: 흰 바탕에서 읽히는 색과 한 단계 작은 크기 */ html.fs-skin2 #obListView #obArenaExtraCards .s2-arena-cd-lb{color:var(--s2-muted)} html.fs-skin2 #obListView #obArenaExtraCards .s2-arena-cd-tm{color:var(--s2-gold);font-size:22px} html.fs-skin2 #obListView .ob-arena-badge{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800} /* 메달(종료 회차): 기존 레이아웃 그대로 한 줄(1·2·3위 줄바꿈 없음, 좁으면 이름 말줄임·배지 숨김은 기존 스크립트). 시안의 알약 칸은 줄이 넘쳐 1~3위가 두 줄로 갈라져 빼었다(2026-10-25 사용자 지시) */ /* 지금 회차 '참가'(시안 금색 버튼, online.php 스크립트가 만든다): 아레나 상세로 가서 그 화면의 참가 버튼으로 신청 */ html.fs-skin2 #obListView #obArenaCard .s2-arena-join{grid-area:acts;position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;border-radius:15px;background:var(--s2-cta);color:var(--s2-cta-ink)!important;font-size:15px;font-weight:800;text-decoration:none!important;box-shadow:0 4px 0 var(--s2-cta-lip);-webkit-tap-highlight-color:transparent} html.fs-skin2 #obListView #obArenaCard .s2-arena-join[hidden]{display:none} html.fs-skin2 #obListView #obArenaCard .s2-arena-join:active{transform:translateY(3px);box-shadow:0 1px 0 var(--s2-cta-lip)} html.fs-skin2 #obListView .ob-arena-actions .pz-btn{min-height:34px;padding:0 14px;border:1px solid var(--s2-line);border-radius:12px;background:var(--s2-surface);color:var(--s2-text);font-weight:800;box-shadow:0 2px 0 var(--s2-lip)} html.fs-skin2 #obListView .ob-arena-actions .pz-btn.primary{border-color:transparent;background:var(--s2-cta);color:var(--s2-cta-ink);font-weight:800;box-shadow:0 3px 0 var(--s2-cta-lip)} html.fs-skin2 #obListView .ob-arena-actions .pz-btn:active:not(:disabled){transform:translateY(2px);box-shadow:none} html.fs-skin2 #obListView #obArenaCard{position:relative;isolation:isolate;overflow:hidden;padding:16px;border:0;border-radius:26px;background:var(--s2-event);color:#f3f5fa;box-shadow:0 4px 0 var(--s2-event-lip)} html.fs-skin2 #obListView #obArenaCard::after{content:"";position:absolute;right:-40px;bottom:-48px;width:150px;height:150px;box-sizing:border-box;border:18px solid rgba(242,179,61,.10);border-radius:50%;pointer-events:none;z-index:-1} /* 장식 고리: 카드 배경 위·글자 아래(isolation) */ @media(hover:hover){html.fs-skin2 #obListView #obArenaCard:hover{border-color:transparent;box-shadow:0 4px 0 var(--s2-event-lip)}} html.fs-skin2 #obListView #obArenaCard .ob-arena-heading{color:#f3f5fa} html.fs-skin2 #obListView #obArenaCard .ob-arena-title{color:#fff!important;font-size:20px;letter-spacing:-.4px} /* 종목 20px·남은 시간 25px·참가 44px(2026-10-26 사용자 지시로 24·30·50에서 줄임) */ /* 날짜 줄은 남은 시간과 아래 끝을 맞춘다(시안) */ html.fs-skin2 #obListView #obArenaCard .ob-arena-metarow{align-self:end} html.fs-skin2 #obListView #obArenaCard .ob-arena-meta{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 날짜 줄은 줄바꿈 없이(2026-10-25 사용자 지시) */ html.fs-skin2 #obListView #obArenaCard .ob-arena-meta,html.fs-skin2 #obListView #obArenaCard .ob-arena-inline-when{color:#b6bed0} html.fs-skin2 #obListView #obArenaCard .ob-arena-status{color:#c8cfdc} html.fs-skin2 #obListView #obArenaCard .ob-arena-participants-count{color:#fff} /* 지금 회차(어두운 카드) 인원 아이콘·숫자는 흰색(2026-10-25 사용자 지시) */ html.fs-skin2 #obListView #obArenaCard .ob-arena-badge.registration{background:rgba(34,197,94,.18);color:#4ade80} /* 접수 중: 기존 초록(어두운 카드라 기존 다크 값, 2026-10-25 사용자 지시) */ html.fs-skin2 #obListView #obArenaCard .ob-arena-badge.active{background:rgba(249,115,22,.16);color:#fb923c;box-shadow:inset 0 0 0 1px rgba(251,146,60,.35)} html.fs-skin2 #obListView #obArenaCard .ob-arena-badge.finished{background:rgba(148,163,184,.15);color:#cbd5e1} html.fs-skin2 #obListView #obArenaCard .ob-arena-actions .pz-btn:not(.primary){border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;box-shadow:none} /* 진행 중 순위표·메달: 앱 다크 모드와 같은 값(어두운 카드 위에서 읽히게, 레이팅 단계 색도 다크 팔레트) */ html.fs-skin2 #obListView #obArenaCard .ob-arena-standings-wrap,html.fs-skin2 #obListView #obArenaCard .ob-arena-standings tbody tr{background:transparent} html.fs-skin2 #obListView #obArenaCard .ob-arena-standings tbody tr:nth-child(even){background:rgba(255,255,255,.04)} html.fs-skin2 #obListView #obArenaCard .ob-arena-standings th{background:transparent;color:#9aa3b5} html.fs-skin2 #obListView #obArenaCard .ob-arena-standings th,html.fs-skin2 #obListView #obArenaCard .ob-arena-standings td{border-color:rgba(255,255,255,.08);color:#e2e8f0} html.fs-skin2 #obListView #obArenaCard .ob-arena-standings tbody tr.ob-arena-me{background:rgba(96,165,250,.12)} html.fs-skin2 #obListView #obArenaCard .ob-arena-player-name,html.fs-skin2 #obListView #obArenaCard .ob-arena-medalist{color:#93c5fd} html.fs-skin2 #obListView #obArenaCard .ob-arena-player-meta,html.fs-skin2 #obListView #obArenaCard .ob-arena-pause-icon{color:#9aa3b5} html.fs-skin2 #obListView #obArenaCard .ob-arena-left-badge{background:rgba(148,163,184,.16);color:#9aa3b5} html.fs-skin2 #obListView #obArenaCard .ob-arena-pres-dot.ob-pres-dot{border-color:var(--s2-event)} html.fs-skin2 #obListView #obArenaCard .ob-arena-game-point.p0{color:#64748b} html.fs-skin2 #obListView #obArenaCard .ob-arena-game-point.p1{color:#94a3b8} html.fs-skin2 #obListView #obArenaCard .ob-arena-game-point.p2,html.fs-skin2 #obListView #obArenaCard .ob-arena-game-point.p3{color:#84cc16} html.fs-skin2 #obListView #obArenaCard .ob-arena-game-point.p4{color:#f59e0b} html.fs-skin2 #obListView #obArenaCard .pz-rt-red{color:#ef5b5b!important}html.fs-skin2 #obListView #obArenaCard .pz-rt-orange{color:#fb923c!important} html.fs-skin2 #obListView #obArenaCard .pz-rt-purple{color:#c084fc!important}html.fs-skin2 #obListView #obArenaCard .pz-rt-blue{color:#60a5fa!important} html.fs-skin2 #obListView #obArenaCard .pz-rt-green{color:#4ade80!important}html.fs-skin2 #obListView #obArenaCard .pz-rating-unofficial{color:#a8b4c4!important} /* 빠른 매칭·방 만들기·AI 대국: 두께 있는 큰 버튼. 색은 기존 레이아웃 그대로(빠른 매칭 청록 #0f766e, AI 대국 파랑 #2563eb: 2026-10-25 사용자 지시), 방 만들기는 흰 카드. 바닥 두께는 각 색의 더 어두운 단계. 앱 다크·자동 매칭 !important 보다 세게 */ html.fs-skin2 #obListView #pzPanel{background-color:transparent!important;border-color:transparent!important} html.fs-skin2 #obListView #pzPanel .pz-btns:has(>#obAutoMatchBtn){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px} html.fs-skin2 #obListView>#pzPanel{width:100%;max-width:none!important}html.fs-skin2 #obListView #obQuickActionRow>.pz-btns{flex:1 1 100%;width:100%} /* 세 버튼 줄은 칸 폭 전체(2026-10-26: 768~991px 에서 가운데로 좁게 몰렸다) */ html.fs-skin2 #obListView #pzPanel :is(#obAutoMatchBtn,#obPlayBtn,#obAiGameBtn){position:relative;margin:0;min-height:66px;gap:4px;border-radius:18px!important;font-size:14px;font-weight:800;transition:transform .08s ease,box-shadow .08s ease} html.fs-skin2 #obListView #pzPanel #obAutoMatchBtn{font-weight:900;border:0!important;background:#0f766e!important;color:#fff!important;box-shadow:0 4px 0 #134e4a} html.fs-skin2 #obListView #pzPanel #obAutoMatchBtn:is(:hover,:focus-visible,:active){border:0!important;background:#115e59!important;color:#fff!important;box-shadow:0 4px 0 #134e4a} html.fs-skin2 #obListView #pzPanel #obPlayBtn,html.fs-skin2 #obListView #pzPanel #obPlayBtn:is(:hover,:focus-visible,:active){border:1px solid var(--s2-line)!important;background:var(--s2-surface)!important;color:var(--s2-text)!important;box-shadow:0 4px 0 var(--s2-lip)} html.fs-skin2 #obListView #pzPanel #obAiGameBtn{border:0!important;background:#2563eb!important;color:#fff!important;box-shadow:0 4px 0 #1e40af} html.fs-skin2 #obListView #pzPanel #obAiGameBtn:is(:hover,:focus-visible,:active){border:0!important;background:#1d4ed8!important;color:#fff!important;box-shadow:0 4px 0 #1e40af} html.fs-skin2 #obListView #pzPanel :is(#obAutoMatchBtn,#obPlayBtn,#obAiGameBtn):active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--s2-lip)} html.fs-skin2 #obListView #pzPanel .ob-lobby-main .ob-lobby-icon{width:22px;height:22px} /* 빠른 매칭 대기 인원(민트 닷·숫자)은 기존 레이아웃 그대로(online.page.css .ob-automatch-waiters, 2026-10-25 사용자 지시). 보이는 대상·숫자도 기존 스크립트 그대로 */ html.fs-skin2 #pzPanel #obAutoMatchBtn .ob-automatch-waiters{top:8px;right:12px} /* 새 스타일 버튼은 모서리가 둥글어(18px) 기존 5px 면 모서리에 붙는다: 조금 왼쪽·아래(2026-10-25 사용자 지시) */ html.fs-skin2 #obListView #pzPanel :is(#obChooser,#obAutoMatchBox,#obTrainingBox){margin-top:12px;padding:14px;border:1px solid var(--s2-line)!important;border-radius:18px;background:var(--s2-surface)!important;box-shadow:0 3px 0 var(--s2-lip)} /* 목록 제목(대국방·대국 결과·접속자·리더보드) */ html.fs-skin2 #obListView>.ob-list-head,html.fs-skin2 #obListView .ob-recent-fallback-title{margin:18px 4px 8px} html.fs-skin2 .ob-list-head h3.card-title{color:var(--s2-text);font-size:16px;font-weight:900} html.fs-skin2 .ob-list-recent-btn{min-height:30px;padding:0 4px;border:0!important;background:transparent!important;color:var(--s2-accent)!important;font-size:12px;font-weight:800} /* 숫자 칩(시안 '대국방 [10]'·'접속자 [24]', online.php 스크립트가 숫자만 감싼다). 구분 글자(': ')·단위('명')는 숨긴다 */ html.fs-skin2 .ob-list-head .s2-cnt-sep{display:none} html.fs-skin2 .ob-list-head .s2-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:8px;padding:0 7px;box-sizing:border-box;border-radius:999px;background:var(--s2-chip);color:var(--s2-text);font-size:12px;font-weight:800;line-height:1;vertical-align:2px;font-variant-numeric:tabular-nums} /* 접속자 제목 옆 상태 범례(시안). 제목은 줄지 않고(제목 글자 맞춤 스크립트가 줄이지 않게) 범례가 좁으면 다음 줄로 */ html.fs-skin2 .ob-online-users-head:has(.s2-pres-legend){flex-wrap:wrap;column-gap:10px;row-gap:4px} html.fs-skin2 .ob-online-users-head:has(.s2-pres-legend) h3.card-title{flex:none} html.fs-skin2 .s2-pres-legend{display:inline-flex;flex-wrap:wrap;gap:4px 10px;color:var(--s2-muted);font-size:11px;font-weight:700;line-height:1.3} html.fs-skin2 .s2-pres-legend>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} html.fs-skin2 .s2-pres-legend i{display:inline-block;width:7px;height:7px;border-radius:50%} html.fs-skin2 .s2-pres-legend .s2-pl-game{background:#f97316}html.fs-skin2 .s2-pres-legend .s2-pl-puzzle{background:#8b5cf6} html.fs-skin2 .s2-pres-legend .s2-pl-online{background:#22c55e}html.fs-skin2 .s2-pres-legend .s2-pl-away{background:#9ca3af} /* 1열(992px 미만)에서 옮겨 온 접속자 묶음: 순서는 기존 레이아웃 그대로(대국방과 대국 결과 사이, 진행 중 대국이 없으면 대국 결과 제목 위, online.page.css order 35/15). 2026-10-25 시안 순서(대국 결과 아래)로 옮겼다가 사용자 지시로 되돌림. 위 여백만 다른 목록 제목(18px)과 같게 */ html.fs-skin2 #obListView>.ob-online-users-block{margin-top:0} /* 대국방·대국 결과: 좁은 배치는 한 목록 상자 안 줄, 넓은 배치는 카드 격자(아래). 행 안쪽은 그대로 */ html.fs-skin2 #obRoomList:has(.ob-room-card),html.fs-skin2 #obRecentFallbackList:has(.ob-recent-fallback-row){gap:0;overflow:hidden;border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 #obRoomList .ob-room-card,html.fs-skin2 #obRecentFallbackList .ob-recent-fallback-row{padding:9px 12px;border:0!important;border-bottom:1px solid var(--s2-line)!important;border-radius:0;background:transparent!important} html.fs-skin2 #obRoomList .ob-room-card:last-child,html.fs-skin2 #obRecentFallbackList .ob-recent-fallback-row:last-child{border-bottom:0!important} /* 행 위아래 안쪽 여백 5px(2026-10-26 사용자 지시, 예전 9px). 상자 첫 행 위·마지막 행 아래는 9px 그대로 */ html.fs-skin2 #obRoomList .ob-room-card,html.fs-skin2 #obRecentFallbackList .ob-recent-fallback-row{padding-top:5px;padding-bottom:5px} html.fs-skin2 #obRoomList .ob-room-card:first-child,html.fs-skin2 #obRecentFallbackList .ob-recent-fallback-row:first-child{padding-top:9px} html.fs-skin2 #obRoomList .ob-room-card:last-child,html.fs-skin2 #obRecentFallbackList .ob-recent-fallback-row:last-child{padding-bottom:9px} html.fs-skin2 #obRoomList .ob-room-card:is(:hover,:active),html.fs-skin2 #obRecentFallbackList .ob-recent-fallback-row:is(:hover,.is-pressed){background:var(--s2-surface2)!important} html.fs-skin2 body.ob-room-lobby #obRoomList .ob-room-card.is-current-room{background:var(--s2-accent-tint)!important} html.fs-skin2 #obRoomEmpty.has-recent-fallback{padding:0;text-align:left} /* 대국방·대국 결과 제목줄은 카드 밖(2026-10-26 카드 안으로 넣었다가 사용자 지시로 되돌림). 카드 안 제목줄은 접속자·리더보드만 */ /* 오른쪽 칸(접속자·내 연결·리더보드): 큰 카드 틀은 벗기고 표마다 카드 */ html.fs-skin2 body:is(:not(.fs-room-mode),.ob-room-lobby) .pz-col-rank .pz-leaderboard-card{border:0!important;background:transparent!important;box-shadow:none!important} html.fs-skin2 body:is(:not(.fs-room-mode),.ob-room-lobby) .pz-col-rank .pz-leaderboard-card>.card-body{padding:0} html.fs-skin2 .ob-online-users-block .ob-online-users-head,html.fs-skin2 .pz-leaderboard-card .pz-leaderboard-head{margin:18px 4px 8px} /* 접속자·리더보드 제목줄은 카드 안 첫 줄(시안 PC·모바일 로비, 2026-10-26 사용자 지시): 제목줄이 카드 윗부분, 표 틀이 아랫부분이 되어 한 장처럼 보인다. 표 틀 윗선이 제목줄과 표 머리(User·Rating) 사이 선. 넓은 배치 접속자 제목 위 4px 는 아래 넓은 배치 규칙이 이긴다. 게임방 오른쪽 칸은 그대로 */ html.fs-skin2 body:is(:not(.fs-room-mode),.ob-room-lobby) .ob-online-users-block .ob-online-users-head,html.fs-skin2 body:is(:not(.fs-room-mode),.ob-room-lobby) .pz-leaderboard-card .ob-leaderboard-head{margin:18px 0 0;box-sizing:border-box;min-height:49px;padding:8px 14px;align-items:center;border:1px solid var(--s2-line);border-bottom:0;border-radius:22px 22px 0 0;background:var(--s2-surface)} html.fs-skin2 body:is(:not(.fs-room-mode),.ob-room-lobby) :is(.ob-online-users-table-frame,.ob-leaderboard-table-frame){border-top-left-radius:0;border-top-right-radius:0} /* 카드 제목줄 높이는 접속자·리더보드 모두 49px(접속자 제목줄 높이, 2026-10-26 사용자 지시): 위아래 8px 가운데 정렬이라 탭(32px)·전체 보기(30px)·숫자 칩(22px)이 들어가도 같다. 좁아 범례가 두 줄이 되면 그만큼만 늘어난다 */ /* 머리줄 글자 세로 가운데 보정(2026-10-26 사용자 지적 '살짝 위로 보인다'): 한글은 글자 상자 아래쪽(내림 자리)이 비어 상자를 가운데 맞춰도 1px 위로 떠 보인다. 글자만 1px 내리고 상자(숫자 칩·탭·체크 상자)는 그대로 둔다 */ html.fs-skin2 :is(.ob-online-users-head,.ob-leaderboard-head) :is(h3.card-title,.s2-pres-legend,.ob-recent-fallback-filter>span,.ob-list-recent-btn){position:relative;top:1px} html.fs-skin2 :is(.ob-online-users-head,.ob-leaderboard-head) h3.card-title .s2-cnt{position:relative;top:-1px} /* 표 머리 User 는 왼쪽(시안), 칸 안쪽 여백은 행 첫 칸과 같게 */ html.fs-skin2 #obOnlineUsersTable thead th:first-child,html.fs-skin2 #obLeaderboardTable thead th:nth-child(2),html.fs-skin2 .ob-league-table thead th:nth-child(2){text-align:left} html.fs-skin2 #obOnlineUsersTable thead th:first-child{padding-left:10px}html.fs-skin2 :is(#obLeaderboardTable,.ob-league-table) thead th:nth-child(2){padding-left:4px} /* online.page.css 행 첫 칸 여백과 같은 값 */ html.fs-skin2 .ob-sidebar-table-frame{overflow:hidden;border:1px solid var(--s2-line)!important;border-radius:22px;background:var(--s2-surface)!important;box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 .ob-sidebar-table-frame .pz-rank-table thead th{background:var(--s2-surface2)!important;border-bottom:1px solid var(--s2-line)!important;color:var(--s2-muted)!important;font-size:11px;font-weight:800} /* 대국 신청 버튼: 시안처럼 옅은 바탕·테두리·바닥 두께. 앱 다크 공용 버튼 !important 보다 세게(표 안으로 한정해 한 단계 높임) */ html.fs-skin2 .ob-sidebar-table-frame .pz-rank-table .ob-direct-invite-btn{border:1px solid var(--s2-line)!important;border-radius:9px;background:var(--s2-surface2)!important;color:var(--s2-accent)!important;box-shadow:0 2px 0 var(--s2-lip)} html.fs-skin2 .ob-sidebar-table-frame .pz-rank-table .ob-direct-invite-btn:is(:hover,:focus-visible){border-color:var(--s2-accent)!important} html.fs-skin2 .ob-sidebar-table-frame .pz-rank-table .ob-direct-invite-btn.ob-offline-challenge-btn{background:var(--s2-surface)!important;color:#e11d48!important;box-shadow:none} html.fs-skin2.fs-app-theme-dark .ob-sidebar-table-frame .pz-rank-table .ob-direct-invite-btn.ob-offline-challenge-btn{color:#f9a8d4!important} /* 다크는 기존 분홍(어두운 바탕 대비) */ html.fs-skin2 .ob-sidebar-table-frame .pz-rank-table .ob-direct-invite-btn:active:not(:disabled){transform:translateY(1px);box-shadow:none} /* 로비 리그 표(휴대폰·태블릿 폭): 닉네임이 빨리 말줄임 되던 것(2026-10-26 사용자 지시). 점수 칸(52px 고정)은 숫자 오른쪽 정렬이라 왼쪽이 비어 있었다. 점수 칸은 내용 폭만(머리 '점수'·가장 긴 점수, 늘어나면 따라 커짐) 쓰고 남는 폭은 닉네임 칸으로: 고정 열 배치를 내용 맞춤(auto)으로 바꾸고 점수 열을 1px(=내용 최소 폭)로. 닉네임 칸은 안쪽이 말줄임(최소 폭 0)이라 표 폭 100% 를 넘지 않는다. 순위 36px(메달 아이콘 폭) */ @media (max-width:991px){ html.fs-skin2 .ob-league-table{table-layout:auto} html.fs-skin2 .ob-league-table col.c-rt{width:1px} html.fs-skin2 .ob-league-table col.c-rank{width:36px} html.fs-skin2 .ob-league-table :is(th,td):nth-child(3){white-space:nowrap;padding-left:10px} } html.fs-skin2 .ob-sidebar-table-frame.ob-net-frame{margin:12px 0 0;border-radius:16px} /* 시안 내 연결 줄: 둥글기 16px(표 카드 22px보다 작게) */ html.fs-skin2 .ob-net-line{padding:12px 14px} html.fs-skin2 .ob-sidebar-table-footer{border-top:1px solid var(--s2-line);background:transparent} html.fs-skin2 .ob-sidebar-table-action{color:var(--s2-accent);font-weight:800} html.fs-skin2 #obDonateBanner .card{border:1px solid var(--s2-line)!important;border-radius:22px;background:var(--s2-surface)!important;box-shadow:0 3px 0 var(--s2-lip)!important} /* 넓은 배치(PC 웹·태블릿 가로, 목록 화면): 왼쪽 본문 + 오른쪽 접속자·리더보드(시안 "PC 웹" 로비) */ /* 오른쪽 칸: 게임방 오른쪽 칸(최소 420px)과 같은 폭까지, 좁으면 본문 칸의 44%(2026-10-25 "우측 열 좀더 넓게") */ html.fs-skin2 body:not(.fs-room-mode) .pz-container.s2-wide>.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,min(420px,44%));column-gap:24px;row-gap:0;margin:0} html.fs-skin2 body:not(.fs-room-mode) .pz-container.s2-wide>.row>*{width:auto;max-width:none;margin:0;padding:0} html.fs-skin2 body:not(.fs-room-mode) .pz-container.s2-wide>.row>.pz-col-board{grid-column:1;grid-row:1} html.fs-skin2 body:not(.fs-room-mode) .pz-container.s2-wide>.row>.pz-col-rank{grid-column:2;grid-row:1;margin-top:0!important;padding-top:0!important} html.fs-skin2 body:not(.fs-room-mode) .pz-container.s2-wide>.row>#obDonateBanner{grid-column:1/-1;grid-row:2;margin-top:20px} html.fs-skin2 body:not(.fs-room-mode) .pz-container.s2-wide .pz-col-rank .pz-leaderboard-card{position:static!important} html.fs-skin2 body:not(.fs-room-mode) .pz-container.s2-wide .ob-online-users-block .ob-online-users-head{margin-top:4px} /* 아레나 카드 둥글기는 PC 시안 값(두 카드 22px, 모바일은 26px·20px) */ html.fs-skin2 .pz-container.s2-wide #obListView .ob-arena-card,html.fs-skin2 .pz-container.s2-wide #obListView #obArenaCard{border-radius:22px} /* 아레나 카드는 넓은 배치도 위아래 한 줄씩(2026-10-25 두 장 나란히 시도 후 사용자 지시로 1열) */ /* PC 시안 크기: 금색 제목 18px·탭 34px */ html.fs-skin2 .pz-container.s2-wide #obListView .ob-arena-list-title{font-size:18px} html.fs-skin2 .pz-container.s2-wide #obListView .ob-arena-list-head .ob-leaderboard-tab{min-height:26px;padding:0 16px;font-size:13px} /* 데일리·유저 탭도 리더보드 탭과 같은 26px(2026-10-26 사용자 지시, 예전 34px) */ /* 빠른 버튼: 아이콘을 글자 왼쪽에 */ html.fs-skin2 .pz-container.s2-wide #obListView #pzPanel .pz-btns:has(>#obAutoMatchBtn){grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} html.fs-skin2 .pz-container.s2-wide #obListView #pzPanel :is(#obAutoMatchBtn,#obPlayBtn,#obAiGameBtn){flex-direction:row;gap:10px;min-height:54px;font-size:16px} /* 세 버튼 높이 좁은 66px·넓은 54px(2026-10-26 사용자 지시로 76·64에서 줄임) */ /* 대국방·대국 결과: 넓은 배치도 좁은 배치와 같은 목록 상자(2026-10-25 사용자 지시, 개별 카드 아님) */ /* ── 리더보드 홈(home.php, 관리자 미리보기): 시안 "새 스타일 시안" 리더보드 홈·"PC 웹" 리더보드 홈 ───────────────────── 명예의 전당·Daily Games·Rank Top 10 은 사이트 첫 화면과 같은 부분 파일이라 마크업은 그대로 두고 CSS 만 덮는다. 명예의 전당 행은 data-hall-kind(_hall_of_champions_section.php)로 고른다: 온라인·아레나는 어두운 챔피언 카드, 퍼즐 종합·네 종목은 한 목록 카드, 스프린트는 따로 카드. 표는 격자로 풀고(행=카드) 갱신 스크립트가 바꿔 끼우는 tbody 구조는 그대로다. Daily·Rank 는 전환 탭을 숨기고 둘 다 보인다(시안: 위아래, 넓은 배치는 나란히). 넓은 배치는 .wrap.s2-wide(home.php 스크립트, 칸 폭 760px 이상). 전환 때는 이 절을 home.php 인라인 CSS 로 옮기고 덮인 구 규칙을 지운다. */ html.fs-skin2 body.fs-home{background:var(--s2-bg)} html.fs-skin2 .wrap.s2-lbhome{color:var(--s2-text)} html.fs-skin2 .wrap.s2-lbhome.s2-web{margin-top:0!important;padding:0 16px 24px!important;background:var(--s2-bg)} @media (min-width:768px){html.fs-skin2 .wrap.s2-lbhome.s2-web{padding:0 24px 32px!important}} /* 2단 웹 여백 = 로비 24px(2026-10-26) */ /* 1단 좌우 여백 16px 통일(2026-10-26): 리더보드 홈 400px 이하 12px(home.php)·앱 로비 12px(부트스트랩 틈)을 16px 로 */ html.fs-skin2 .wrap.s2-lbhome{--page-pad:16px;max-width:none} html.fs-skin2 .wrap.s2-lbhome>:is(.home-user-search,.home-hall,.home-rank-switch){max-width:none} /* home.php 560px 가운데 규칙 해제(1단도 폭을 다 쓴다, 2026-10-26) */ @media (max-width:767.98px){html.fs-skin2 body:not(.fs-room-mode) .pz-container:has(#obListView){padding-left:16px!important;padding-right:16px!important}} /* 머리줄: 큰 제목 + '전체 순위' 알약 */ html.fs-skin2 .wrap.s2-lbhome>#pzTitleBar{height:auto!important;min-height:56px;margin:0 0 4px!important;padding:16px 4px 12px!important;background:transparent!important;color:var(--s2-text)!important;line-height:1.2!important;overflow:visible} html.fs-skin2 .wrap.s2-lbhome>#pzTitleBar #pzTitle{padding-left:0;color:var(--s2-text)!important;font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.2!important} html.fs-skin2 .wrap.s2-lbhome .s2-lb-all{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:40px;margin:-6px 0;padding:0 12px;border-radius:999px;background:var(--s2-surface);border:1px solid var(--s2-line);box-shadow:0 2px 0 var(--s2-lip);color:var(--s2-text)!important;font-size:13px;font-weight:800;line-height:1;text-decoration:none!important;white-space:nowrap} html.fs-skin2 .wrap.s2-lbhome .s2-lb-all svg{width:14px;height:14px} /* 검색 */ html.fs-skin2 .wrap.s2-lbhome .home-user-search{--home-search-h:48px;margin-bottom:14px} html.fs-skin2 .wrap.s2-lbhome .home-user-search__input{border:1.5px solid var(--s2-line)!important;border-radius:16px;background:var(--s2-surface)!important;color:var(--s2-text)!important;box-shadow:0 2px 0 var(--s2-lip)} html.fs-skin2 .wrap.s2-lbhome .home-user-search__input:focus{border-color:var(--s2-accent)!important} html.fs-skin2 .wrap.s2-lbhome .home-user-search__results{top:54px;border-radius:16px} /* 명예의 전당: 제목(금색) + 격자 */ html.fs-skin2 .wrap.s2-lbhome .home-hall{margin-bottom:26px} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions{overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .level-title{display:flex!important;align-items:center;height:auto!important;margin:6px 4px 10px!important;padding:0!important;background:transparent!important;color:var(--s2-gold)!important;font-size:16px!important;line-height:1.3!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .level-title b{font-weight:900} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .level-title a{color:inherit!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table{display:block!important;border:0!important;background:transparent!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table colgroup{display:none} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr{min-width:0;background:var(--s2-surface)!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody td{display:block;width:auto!important;max-width:none!important;min-width:0;height:auto!important;padding:0!important;border:0!important;background:transparent!important;color:inherit;font-size:inherit!important;line-height:1.25!important;text-align:left!important;white-space:nowrap;overflow:hidden} /* 닉네임 줄(사진·국기·후원 배지·파란 이름·인증 마크)은 기존 스타일 그대로(2026-10-25 사용자 지시). 크기만 카드에 맞춘다 */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .oc-hall-id{font-size:15px} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .oc-hall-game-link{color:var(--s2-muted)!important;font-weight:800} /* 온라인·아레나: 어두운 챔피언 카드(종목·닉네임 줄·값). 닉네임 줄은 기존 모양 그대로 가운데, 이름 색은 어두운 바탕용 기존 다크 색(#93c5fd) */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr:is([data-hall-kind="online"],[data-hall-kind="arena"]){display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:16px 12px 14px;border-radius:22px;background:var(--s2-event)!important;color:#f3f5fa;box-shadow:0 4px 0 var(--s2-event-lip)} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="arena"]{order:1} /* 기존 레이아웃처럼 아레나가 온라인 왼쪽(2026-10-25 사용자 지시) */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="online"]{order:2} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) td{align-self:stretch;text-align:center!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .oc-hall-game-link{display:flex!important;align-items:center;gap:6px;max-width:100%;color:#b6bed0!important;font-size:12px} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .oc-hall-game-link::before{content:"";width:26px;height:26px;flex:none;border-radius:50%;background:var(--s2-hall-ic) center/14px no-repeat,transparent var(--s2-disc-w-26,var(--s2-disc-w-img)) center/104% no-repeat;box-shadow:0 2px 3px rgba(0,0,0,.35)} /* 원판 아이콘이 붙는 종목 이름(챔피언·스프린트 카드)은 칸·링크가 원판 그림자를 잘라내지 않게(2026-10-25 "아이콘이 잘리는 느낌") */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr:is([data-hall-kind="online"],[data-hall-kind="arena"],[data-hall-kind="sprint"]) td.oc-hall-game-cell, html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"],[data-hall-kind="sprint"]) .oc-hall-game-link{overflow:visible} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="online"]{--s2-hall-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314171e'%3E%3Ccircle cx='9' cy='12' r='6'/%3E%3Ccircle cx='15' cy='12' r='6' opacity='.5'/%3E%3C/svg%3E")} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="arena"]{--s2-hall-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v4a4 4 0 0 1-8 0V4Z'/%3E%3Cpath d='M8 6H5v1a4 4 0 0 0 4 4M16 6h3v1a4 4 0 0 1-4 4M12 12v5M9 20h6M10 17h4'/%3E%3C/svg%3E")} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .oc-hall-player{position:relative;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:4px 0 2px;overflow:visible} /* 사진 아래 "1" 배지는 뺐다(2026-10-25 사용자 지시 "명예의 전당에는 필요없어"), 사진·닉네임 간격 15px → 8px */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .oc-hall-photo{flex:none;width:64px;height:64px;box-sizing:border-box;border:3px solid var(--s2-cta)!important;border-radius:18px;background:#e5e7eb} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) td.oc-hall-player-cell{margin-top:auto} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) td.oc-hall-rating-cell{margin-bottom:auto} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .oc-hall-id{flex:0 1 auto;color:#93c5fd} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) td.oc-hall-rating-cell{color:var(--s2-cta);font-size:20px;font-weight:800;font-variant-numeric:tabular-nums} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .pz-rt-red{color:#ef5b5b!important}html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .pz-rt-orange{color:#fb923c!important}html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .pz-rt-purple{color:#c084fc!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .pz-rt-blue{color:#60a5fa!important}html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .pz-rt-green{color:#4ade80!important}html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="online"],[data-hall-kind="arena"]) .pz-rating-unofficial{color:#a8b4c4!important} /* 퍼즐 종합(금색 머리 줄) + 네 종목: 한 목록 카드 */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr:is([data-hall-kind="puzzle"],.oc-hall-puzzle-child){grid-column:1/-1;order:3;display:grid;align-items:center;column-gap:8px;border:1px solid var(--s2-line);border-bottom:0} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"]{grid-template-columns:36px auto minmax(0,1fr) auto;grid-template-areas:"ic ph lb rt" "ic ph nm rt";column-gap:10px;row-gap:3px;margin-top:10px;padding:12px;border-radius:22px 22px 0 0;background:var(--s2-gold-tint)!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"]::before{content:"";grid-area:ic;width:36px;height:36px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath transform='translate(12 12) scale(.86) translate(-12.5 -11.5)' d='M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z'/%3E%3C/svg%3E") center/19px no-repeat,transparent var(--s2-disc-b-36,var(--s2-disc-b-img)) center/104% no-repeat;box-shadow:0 0 0 1.5px var(--s2-disc-ring),0 2px 3px rgba(0,0,0,.35)} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"] td.oc-hall-game-cell{grid-area:lb;align-self:end;text-align:left!important} /* 퍼즐 종합(2026-10-25 사용자 지시): '퍼즐 종합'은 닉네임 바로 위, 값은 오른쪽 두 줄 가운데, 사진은 두 줄 높이 둥근 사각. 사진·이름을 줄 격자에 바로 놓으려 칸·묶음을 풀어 둔다(마크업 그대로) */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"] :is(td.oc-hall-player-cell,.oc-hall-player){display:contents} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"] .oc-hall-photo{grid-area:ph;width:40px;height:40px;flex:none;box-sizing:border-box;border:1px solid var(--s2-line)!important;border-radius:11px;object-fit:cover} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"] .oc-hall-id{grid-area:nm;align-self:start;min-width:0} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"] td.oc-hall-player-cell>span{grid-area:nm} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"] td.oc-hall-rating-cell{grid-area:rt;align-self:center;font-size:20px;font-weight:800;line-height:1.15!important;text-align:right!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="puzzle"] .oc-hall-game-link{color:var(--s2-gold)!important;font-size:12px} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="puzzle"] .oc-hall-id{font-size:15px} /* 네 종목 줄: 퍼즐 종합처럼 두 줄(2026-10-25 사용자 제안: 다국어 긴 종목 이름이 잘려서). 종목 아이콘 원 | 종목 이름 / 사진·국기·닉네임 | 값. 아이콘은 흰 돌(::before)과 검은 아이콘(::after, 흰 돌이라 다크 모드도 검정)을 같은 칸에 겹친다 */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"ic lb rt" "ic nm rt";column-gap:10px;row-gap:2px;padding:9px 12px 9px 14px} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child::before{content:"";grid-area:ic;align-self:center;width:28px;height:28px;border-radius:50%;background:transparent var(--s2-disc-w-28,var(--s2-disc-w-img)) center/104% no-repeat;box-shadow:0 0 0 1px rgba(17,21,34,.10),0 2px 3px rgba(0,0,0,.25)} /* 흰 돌(2026-10-25 사용자 지시, 회색 원 대신) */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child::after{content:"";grid-area:ic;align-self:center;justify-self:center;width:14px;height:14px;background:#14171e;-webkit-mask:var(--s2-hall-ic) center/contain no-repeat;mask:var(--s2-hall-ic) center/contain no-repeat} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child td.oc-hall-game-cell{grid-area:lb} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child td.oc-hall-player-cell{grid-area:nm} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="xot"]{--s2-hall-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='8' cy='8' r='2.6'/%3E%3Ccircle cx='16' cy='8' r='2.6'/%3E%3Ccircle cx='8' cy='16' r='2.6'/%3E%3Ccircle cx='16' cy='16' r='2.6'/%3E%3C/svg%3E")} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="midgame"]{--s2-hall-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23000' stroke='none'/%3E%3C/svg%3E")} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="earlyend"]{--s2-hall-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 3v18'/%3E%3Cpath d='M6 4h11l-2 3.5 2 3.5H6z'/%3E%3C/svg%3E")} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="endgame"]{--s2-hall-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M5 3h2v18H5z'/%3E%3Cpath d='M7 4h11l-2 3.5L18 11H7z'/%3E%3C/svg%3E")} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child:not(:has(+ tr.oc-hall-puzzle-child)){border-bottom:1px solid var(--s2-line);border-radius:0 0 22px 22px;box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child td.oc-hall-rating-cell{grid-area:rt;align-self:center;font-size:15px;font-weight:800;text-align:right!important} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .oc-hall-puzzle-child .oc-hall-game-link{display:block!important;max-width:100%;padding-left:0;overflow:hidden;color:var(--s2-muted)!important;font-size:12px!important;line-height:1.3;text-overflow:ellipsis;white-space:nowrap} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .oc-hall-puzzle-child .oc-hall-game-link::before{content:none;display:none} /* 기존 표의 하위 종목 연결선(부분 파일 CSS)도 끈다 */ /* 스프린트: 따로 카드 */ html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"]{grid-column:1/-1;order:4;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"ic lb rt" "ic nm rt";align-items:center;column-gap:10px;row-gap:3px;margin-top:10px;padding:12px;border:1px solid var(--s2-line);border-radius:22px;box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"]::before{content:"";grid-area:ic;width:36px;height:36px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M12 2v3M18 5l2 2'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3Cpath d='M12 9v5l3 2'/%3E%3C/svg%3E") center/19px no-repeat,transparent var(--s2-disc-b-36,var(--s2-disc-b-img)) center/104% no-repeat;box-shadow:0 0 0 1px rgba(17,21,34,.10),0 2px 3px rgba(0,0,0,.25)} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"] td.oc-hall-game-cell{grid-area:lb} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"] td.oc-hall-player-cell{grid-area:nm} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"] td.oc-hall-rating-cell{grid-area:rt;font-size:20px;font-weight:800;text-align:right!important;font-variant-numeric:tabular-nums} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="sprint"] .oc-hall-game-link{font-size:12px} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr[data-hall-kind="sprint"] .oc-hall-id{font-size:15px} /* 넓은 배치: 아레나 | 온라인 | 퍼즐 목록 | 스프린트 한 줄, 네 칸 같은 높이(시안 PC 배치, 아레나·온라인 순서는 기존 레이아웃). 스프린트는 어두운 카드와 같은 세로 카드(흰 바탕) */ html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);column-gap:14px} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="arena"]{grid-column:1;grid-row:1/6} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="online"]{grid-column:2;grid-row:1/6} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="puzzle"]{grid-column:3;grid-row:1;margin-top:0} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr.oc-hall-puzzle-child{grid-column:3} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .oc-hall-puzzle-child .oc-hall-id{font-size:14px} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"]{grid-column:4;grid-row:1/6;margin-top:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 14px} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"]::before{display:none} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"] td{align-self:stretch;text-align:center!important} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"] td.oc-hall-player-cell{margin-top:auto} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions .index-table tbody tr[data-hall-kind="sprint"] td.oc-hall-rating-cell{margin-bottom:auto;text-align:center!important} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions tr[data-hall-kind="sprint"] .oc-hall-game-link{display:flex!important;align-items:center;gap:6px;max-width:100%} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions tr[data-hall-kind="sprint"] .oc-hall-game-link::before{content:"";width:26px;height:26px;flex:none;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M12 2v3M18 5l2 2'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3Cpath d='M12 9v5l3 2'/%3E%3C/svg%3E") center/14px no-repeat,transparent var(--s2-disc-b-26,var(--s2-disc-b-img)) center/104% no-repeat;box-shadow:0 0 0 1px rgba(17,21,34,.10),0 2px 3px rgba(0,0,0,.25)} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions tr[data-hall-kind="sprint"] .oc-hall-player{flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:4px 0 2px;overflow:visible} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions tr[data-hall-kind="sprint"] .oc-hall-photo{flex:none;width:56px;height:56px;box-sizing:border-box;border:1px solid var(--s2-line)!important;border-radius:16px;background:#e5e7eb} html.fs-skin2 .wrap.s2-lbhome.s2-wide .oc-hall-champions tr[data-hall-kind="sprint"] .oc-hall-id{flex:0 1 auto} /* Daily Games·Rank Top 10: 전환 탭 숨기고 둘 다(좁으면 위아래, 넓으면 나란히) */ html.fs-skin2 .wrap.s2-lbhome .home-rank-tabs{display:none!important} html.fs-skin2 .wrap.s2-lbhome .home-rank-switch{display:block} html.fs-skin2 .wrap.s2-lbhome .home-rank-panel,html.fs-skin2 .wrap.s2-lbhome .home-rank-panel[hidden]{display:block!important;width:auto!important} html.fs-skin2 .wrap.s2-lbhome .home-rank-panel+.home-rank-panel{margin-top:26px} html.fs-skin2 .wrap.s2-lbhome.s2-wide .home-rank-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} /* 두 표 사이 = 예전 레이아웃 12px(2026-10-26, 닉네임 칸 폭) */ html.fs-skin2 .wrap.s2-lbhome.s2-wide .home-rank-panel+.home-rank-panel{margin-top:0} /* 위젯 안 순서: 제목 줄 → 종목 타일 → 표 카드(카드 틀은 풀어 제목을 타일 위로) */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]){display:flex;flex-direction:column} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])>.fs-daily-games--separate-tabs{display:contents} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .fs-daily-games--separate-tabs>.level-section{order:1;margin:0 0 10px!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])>.daily-games-tabs-row{order:2} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .fs-daily-games--separate-tabs>:not(.level-section){order:3} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .fs-daily-games--separate-tabs>div:has(>.index-table){padding-bottom:0!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title{height:auto!important;min-height:34px;padding:0 0 0 4px!important;background:transparent!important;color:var(--s2-text)!important;font-size:16px!important;line-height:1.3!important;gap:8px} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title b{font-weight:900} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title a{color:inherit!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title .tl-scope-tabs{gap:0;padding:3px;border-radius:12px;background:var(--s2-chip)} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title .tl-scope-tabs .daily-games-separator{display:none} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title .tl-scope-tabs .daily-games-tab{min-height:26px;padding:0 12px;border-radius:9px;background:transparent!important;color:var(--s2-muted)!important;font-size:12px;font-weight:700;opacity:1} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title .tl-scope-tabs .daily-games-tab.active{font-weight:800;background:var(--s2-surface)!important;color:var(--s2-text)!important;box-shadow:0 1px 2px rgba(17,21,34,.12)} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .home-rank-subselect{height:32px;padding:0 6px;border:1px solid var(--s2-line);border-radius:10px;background:var(--s2-surface);color:var(--s2-text);font-size:13px!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .home-rank-subselect:is(:focus,:focus-visible){outline:0;box-shadow:none;border-color:var(--s2-line)} /* 선택 상자 파란 포커스 테두리 없음(2026-10-26 사용자 지시) */ /* 종목 타일(시안 PC: 글자 타일, 고른 것은 파란 테두리·옅은 파랑). 높이 32px = 로비 리더보드 탭 묶음 높이(2026-10-26, 예전 40px) */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])>.daily-games-tabs-row{margin:0 0 10px;padding:0;overflow:visible;text-align:left} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])>.daily-games-tabs-row .daily-games-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;gap:6px} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])>.daily-games-tabs-row .daily-games-tab{min-width:0;min-height:32px;padding:0 4px;border:1.5px solid var(--s2-line);border-radius:12px;background:var(--s2-surface)!important;color:var(--s2-text)!important;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])>.daily-games-tabs-row .daily-games-tab.active{border-color:var(--s2-accent);background:var(--s2-accent-tint)!important;color:var(--s2-accent)!important} /* 표 카드 */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .index-table{border-collapse:separate!important;border-spacing:0;border:1px solid var(--s2-line)!important;border-radius:22px;background:var(--s2-surface)!important;box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .index-table :is(th,td){border:0!important;border-top:1px solid var(--s2-line)!important;background:transparent!important;color:var(--s2-text)} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .index-table thead th{border-top:0!important;color:var(--s2-muted)!important;font-size:11px!important;font-weight:800;padding-top:8px!important;padding-bottom:8px!important} /* 표 머리 행은 옅은 회색(2026-10-26 사용자 지시) */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .index-table thead th{background:var(--s2-surface2)!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .index-table tbody tr{background:transparent!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .index-table tbody td{padding-top:8px!important;padding-bottom:8px!important} /* 글자 크기(닉네임·레이팅)는 기존 레이아웃 그대로(home.php 16px·좁으면 15px, 2026-10-25 사용자 지시) */ /* 카드 = 시상대부터 '전체 순위 보기' 줄까지, 제목 줄·종목 탭은 카드 밖(2026-10-26 사용자 지시, 휴대폰·PC 같음). Daily·Rank 마크업이 달라(Rank 는 표를 감싼 칸이 없다) 감싸는 요소를 쓰지 않고, 묶음 뒤에 카드 그림(::before)을 탭 줄 아래(--s2-lbcard-top)부터 줄 아래(--s2-lbcard-bottom)까지 깐다(값은 home.php) */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]){position:relative;isolation:isolate} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])::before,html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])::after{content:"";position:absolute;left:0;right:0;top:var(--s2-lbcard-top,96px);bottom:var(--s2-lbcard-bottom,0px);border-radius:22px;pointer-events:none} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])::before{z-index:-1;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} /* 카드 바탕·아래 두께: 내용 아래 */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])::after{z-index:1;border:1px solid var(--s2-line)} /* 카드 테두리: 내용 위(표 머리 행 회색이 좌우 선을 덮지 않게, 표는 인라인 width·margin !important 라 안쪽으로 못 넣는다) */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root])>.daily-games-tabs-row{margin:0 0 10px!important;padding:0!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .fs-daily-games--separate-tabs .index-table{border:0!important;border-radius:0;background:transparent!important;box-shadow:none} /* 데일리 숫자 칸도 랭크처럼 내용 폭(2026-10-26 사용자 지시 '오른쪽으로 몰기'): 스프린트 탭은 숫자 칸마다 표 폭 9%(_daily_games_section.php)라 닉네임 칸이 좁았다. 아레나(메달 칸 고정 폭)는 그대로 */ html.fs-skin2 .wrap.s2-lbhome [data-daily-games-root]:not([data-daily-games-active="arena"]) .index-table :is(th,td):nth-child(n+3){width:1%!important;min-width:0!important} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .fs-daily-games--separate-tabs .index-table thead th{border-top:1px solid var(--s2-line)!important;border-radius:0!important} /* 시상대와 표 머리 사이 선 */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .s2-podium{padding:14px 10px 0} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .s2-lg-legend{padding:12px 14px 0} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .s2-lg-legend:not([hidden])+.s2-podium{padding-top:6px} /* 전체 순위 보기 줄: 로비 리더보드 줄(online.php .ob-sidebar-table-footer·action)과 같은 값, 이 문서에는 그 CSS 가 없어 여기 둔다 */ html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .s2-lb-foot{display:flex;min-height:33px;align-items:center;justify-content:center;border-top:1px solid var(--s2-line);background:transparent} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .s2-lb-foot[hidden]{display:none} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) .s2-lb-foot .ob-sidebar-table-action{display:flex;width:100%;min-height:33px;align-items:center;justify-content:center;padding:5px 10px;color:var(--s2-accent)!important;font-size:13px;font-weight:800;line-height:1.2;text-decoration:none!important} html.fs-skin2 .wrap.s2-lbhome.s2-wide :is([data-daily-games-root],[data-top-leaderboard-root]) .daily-games-title{font-size:18px!important} /* Daily·Rank Top 10 시상대(home.php 스크립트가 지금 보이는 1~3위 행으로 그린다, 그 세 행은 표에서 숨김. 리그·아레나 포함). 2·1·3 순, 사진 테두리·받침 색은 시안, 순위는 메달 아이콘 */ html.fs-skin2 .wrap.s2-lbhome .s2-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;padding:6px 4px 0} html.fs-skin2 .wrap.s2-lbhome .s2-podium[hidden]{display:none} html.fs-skin2 .wrap.s2-lbhome :is([data-daily-games-root],[data-top-leaderboard-root]) tr.s2-pod-row{display:none!important} html.fs-skin2 .wrap.s2-lbhome .s2-pod{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;--pod:#cbd2dd;--pod-ink:#1a2030;--stand:#e6e9f0;--stand-h:84px} html.fs-skin2 .wrap.s2-lbhome .s2-pod.p1{grid-column:2;grid-row:1;--pod:var(--s2-cta);--pod-ink:var(--s2-cta-ink);--stand:var(--s2-gold-tint);--stand-h:104px} html.fs-skin2 .wrap.s2-lbhome .s2-pod.p2{grid-column:1;grid-row:1} /* 자리 고정: 2위 왼쪽·1위 가운데·3위 오른쪽, 없는 순위 자리는 빈칸(한두 명일 때) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod.p3{grid-column:3;grid-row:1;--pod:#c77b45;--pod-ink:#fff;--stand:#f5e3d6;--stand-h:70px} html.fs-skin2.fs-app-theme-dark .wrap.s2-lbhome .s2-pod.p2{--stand:var(--s2-chip)} html.fs-skin2.fs-app-theme-dark .wrap.s2-lbhome .s2-pod.p3{--stand:rgba(199,123,69,.2)} html.fs-skin2 .wrap.s2-lbhome .s2-pod-ph{position:relative;display:block;cursor:pointer} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions tr:is([data-hall-kind="arena"],[data-hall-kind="online"]) .oc-hall-photo{cursor:pointer} html.fs-skin2 .wrap.s2-lbhome .oc-hall-champions .index-table tbody tr[data-hall-kind]{cursor:pointer} /* 카드 빈 곳 = 종목 리더보드(home.php) */ /* 아레나·온라인 카드 사진을 누르면 유저기록(home.php, 2026-10-25) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-ph img{display:block;width:52px;height:52px;box-sizing:border-box;border:3px solid var(--pod);border-radius:16px;background:#e5e7eb;object-fit:cover} html.fs-skin2 .wrap.s2-lbhome .s2-pod.p1 .s2-pod-ph img{width:64px;height:64px;border-radius:18px} html.fs-skin2 .wrap.s2-lbhome .s2-pod-st{position:relative} html.fs-skin2 .wrap.s2-lbhome .s2-pod-st .s2-pod-medal{position:absolute;left:0;top:3px;bottom:auto;transform:none;font-size:22px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))} /* 순위는 표와 같은 메달 아이콘(숫자 원 대신) */ /* 메달은 받침대 왼쪽 위 모서리, 대부분 받침대 안(2026-10-26 사용자 지시, 예전 사진 아래 가운데→사진 왼쪽 위·아래 모서리를 거쳐). 닉네임은 사진 바로 아래 */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-nm{display:flex;justify-content:center;max-width:100%;min-width:0;margin-top:0;overflow:hidden;font-size:14px;white-space:nowrap} html.fs-skin2 .wrap.s2-lbhome .s2-pod-nm .midgame-id-text{max-width:100%;min-width:0} html.fs-skin2 .wrap.s2-lbhome .s2-pod-st{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;min-height:var(--stand-h);padding:7px 4px 6px;box-sizing:border-box;border-radius:14px 14px 0 0;background:var(--stand)} /* 최소 높이: 배지(1900↑)가 있으면 늘어나 잘리지 않는다(2026-10-25) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-maincap{color:var(--s2-muted);font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.2px;white-space:nowrap} /* 메인 지표 캡션(표 머리 글자) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-main{font-size:17px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums} html.fs-skin2 .wrap.s2-lbhome .s2-pod-sub{color:var(--s2-muted);font-size:14px;font-weight:400;line-height:1.2} /* 서브 값은 메인(17px)보다 한 단계 작게, 굵게 하지 않는다(2026-10-25) */ html.fs-skin2 .wrap.s2-lbhome :is(.s2-pod-main,.s2-pod-mainrow)+:is(.s2-pod-sub,.ocl-need-badge){margin-top:4px} /* 메인 값과 서브 값 사이 살짝(2026-10-25) */ /* 국기 + 메인 값 한 줄(2026-10-25 사용자 제안): 국기는 닉네임 줄과 같은 크기·같은 오른쪽 여백 */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-mainrow{display:inline-flex;align-items:center;justify-content:center;gap:0;max-width:100%} /* 국기↔메인 값 = 표의 국기↔닉네임과 같은 간격: 국기 자체 오른쪽 여백(oc_flag_html 4px)을 그대로 쓴다(2026-10-25 사용자 지시) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-mainrow .oc-flag{flex:none} html.fs-skin2 .wrap.s2-lbhome .s2-pod-mainrow .oc-country-leaderboard-link{flex:none} html.fs-skin2 .wrap.s2-lbhome .s2-pod-sub.is-medal{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;margin-top:6px;color:var(--s2-text);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums} /* 아레나 메달 수·스프린트 값: 한 줄(넘치면 짝 단위로 줄바꿈) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-sub.is-medal>span{white-space:nowrap} /* 스프린트 서브 항목('최고·평균'·'오답·시간', home.php 가 .is-stack)은 항목마다 한 줄, 왼쪽 정렬·왼쪽 여백 12px(2026-10-26 사용자 지시). 아레나 메달 수는 위처럼 한 줄 가운데 */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-sub.is-medal.is-stack{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;align-self:stretch;gap:2px;padding-left:12px;text-align:left} html.fs-skin2 .wrap.s2-lbhome .s2-pod-sub.is-medal .s2-pod-cap{color:var(--s2-muted)} /* 레이팅 숫자는 놓인 자리의 크기를 따른다: 메인이면 메인(17px), 서브면 서브(14px)(2026-10-25 사용자 지시: 서브는 메인보다 조금 작게, 레이팅도) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-st :is([class*="pz-rt-"],.pz-rating-unofficial){font-size:inherit} /* 리그: 레이팅 미달 배지는 레이팅 아래, 승급권은 받침 녹색 테두리(표의 녹색 띠와 같은 색) */ html.fs-skin2 .wrap.s2-lbhome .s2-pod-st .ocl-need-badge{margin:3px 0 0;line-height:1.3} html.fs-skin2 .wrap.s2-lbhome .s2-pod.is-promo .s2-pod-st{border:2px solid #16a34a;border-bottom:0} /* 아래 변은 표와 맞닿아 없앤다(2026-10-25) */ /* 리그 승급 안내(녹색 뜻): 시상대 위 오른쪽, 로비 리그 탭과 같은 녹색 네모 + 짧은 글(전체 규칙은 툴팁) */ html.fs-skin2 .wrap.s2-lbhome .s2-lg-legend{display:flex;justify-content:flex-end;padding:0 6px 6px;color:var(--s2-muted);font-size:12px;font-weight:700} html.fs-skin2 .wrap.s2-lbhome .s2-lg-legend[hidden]{display:none} html.fs-skin2 .wrap.s2-lbhome .s2-lg-legend>span{display:inline-flex;align-items:center;gap:5px} html.fs-skin2 .wrap.s2-lbhome .s2-lg-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;background:#16a34a} /* ── 분석 페이지(flipsight/index.php·en/flipsight/index.php 일반 페이지, 관리자 미리보기 2026-10-26) ────────────────────── 게임 오버레이(_fullscreen_overlay.php)는 건드리지 않는다. 표식 = .pz-container.s2-analysis. 제목줄(#pzTitleBar)은 로비 규칙 그대로. 2단은 다른 새 스타일 페이지와 같은 768px(예전 992px), 왼쪽 분석 홈(또는 보드) + 오른쪽 사용 안내. 1단 좌우 16px, 2단 웹 24px */ html.fs-skin2:is(.fs-online-app,.fs-embed) body:has(.s2-analysis){background:var(--s2-bg)} html.fs-skin2 .level-section:has(>#pzTitleBar){margin-bottom:0!important} /* 다국어 제목 감싸개 아래 흰 줄 5px */ html.fs-skin2 .container.pz-container.s2-analysis{background:var(--s2-bg);padding:4px 16px 24px!important} @media (min-width:768px){html.fs-skin2 .container.pz-container.s2-analysis{padding:4px 24px 32px!important}} html.fs-skin2 .pz-container.s2-analysis>.row{display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px;margin:0} html.fs-skin2 body .pz-container.s2-analysis>.row>:is(.pz-col-board,.pz-col-rank){width:auto;max-width:none;margin:0;padding:0!important} @media (min-width:768px){ html.fs-skin2 .pz-container.s2-analysis>.row{grid-template-columns:minmax(0,1fr) minmax(300px,min(420px,44%));column-gap:24px} html.fs-skin2 body.ocv-photo-import-mode .pz-container.s2-analysis>.row{grid-template-columns:minmax(0,1fr)} /* 사진 불러오기는 안내 칸을 숨긴다 */ /* 안내 카드 높이 = 왼쪽 칸(예전 992px 이상 규칙과 같은 방식, 넘치면 카드 안 스크롤). 앱은 예전처럼 제 높이 */ html.fs-skin2:not(.fs-embed) .s2-analysis .pz-col-rank.fs-guide-col{contain:size} html.fs-skin2:not(.fs-embed) .s2-analysis .pz-col-rank.fs-guide-col>.card{height:100%;overflow-y:auto;overscroll-behavior:contain} } /* 분석 홈 버튼: 랜딩 타일과 같은 카드, 아이콘은 게임방 돌(새로 분석 = 흑돌, 나머지 = 백돌) */ html.fs-skin2 .s2-analysis .fs-analysis-home{margin:0;padding:0;color:var(--s2-text)} html.fs-skin2 .s2-analysis .fs-analysis-actions{gap:12px} html.fs-skin2 .s2-analysis .fs-analysis-actions button{align-items:center;gap:14px;padding:16px;border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip);color:var(--s2-text);transition:transform .08s ease,box-shadow .08s ease} html.fs-skin2 .s2-analysis .fs-analysis-actions button:hover{border-color:var(--s2-accent)} html.fs-skin2 .s2-analysis .fs-analysis-actions button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--s2-lip)} html.fs-skin2 .s2-analysis .fs-analysis-actions :is(svg,.fs-analysis-action-icon){box-sizing:border-box;width:44px;height:44px;flex:0 0 44px;padding:11px;border-radius:50%;background:transparent var(--s2-disc-w-44,var(--s2-disc-w-img)) center/104% no-repeat;box-shadow:0 0 0 1px rgba(17,21,34,.10),0 3px 4px rgba(17,21,34,.22);color:#14171e} html.fs-skin2 .s2-analysis .fs-analysis-action-icon{display:flex;align-items:center;justify-content:center;padding:0;background-image:var(--s2-disc-b-44,var(--s2-disc-b-img));box-shadow:0 0 0 1.5px var(--s2-disc-ring),0 3px 4px rgba(0,0,0,.35);color:#fff;font-size:26px;font-weight:700;line-height:1} html.fs-skin2 .s2-analysis .fs-analysis-home strong{font-size:17px;font-weight:800;line-height:1.35} html.fs-skin2 .s2-analysis .fs-analysis-home small{margin-top:3px;color:var(--s2-muted);font-size:14px;line-height:1.45} html.fs-skin2 .s2-analysis .fs-analysis-help{min-height:50px;padding:10px 16px;border:1px solid var(--s2-line);border-radius:18px;background:var(--s2-surface);box-shadow:0 2px 0 var(--s2-lip);color:var(--s2-text)!important} html.fs-skin2 .s2-analysis .fs-analysis-help:hover{border-color:var(--s2-accent)} html.fs-skin2 .s2-analysis .fs-analysis-help span{color:var(--s2-muted)} /* 사용 안내 카드 */ html.fs-skin2 .s2-analysis .fs-guide-col>.card{border:1px solid var(--s2-line)!important;border-radius:22px;background:var(--s2-surface)!important;box-shadow:0 3px 0 var(--s2-lip)!important;color:var(--s2-text)!important} html.fs-skin2 .s2-analysis .fs-guide-col>.card>.card-body{padding:18px} html.fs-skin2 .s2-analysis .fs-guide-title{color:var(--s2-text);font-size:18px!important;font-weight:900;letter-spacing:-.3px} html.fs-skin2 .s2-analysis .fs-guide-section{border-top-color:var(--s2-line)} html.fs-skin2 .s2-analysis .fs-guide-section h6{color:var(--s2-text);font-weight:800} html.fs-skin2 .s2-analysis .fs-guide-section p{color:var(--s2-muted)} /* ── GIF 메이커(gif/index.html·en/gif/index.html, 관리자 미리보기 2026-10-26) ───────────────────────────────────────── 새 스타일은 PHP 가 마크업을 따로 낸다(.s2-gif, 예전 마크업은 그대로). 같은 id(#gif-form·#moves·#btn-gif·#loading-message·#result-message·#default-message)라 생성 스크립트(generate_gif.js)는 그대로다. 1단: 입력 카드 → 오프닝 링크 → 결과·예시. 768px 이상 2단: 왼쪽 입력·오프닝 링크, 오른쪽 결과·예시 */ html.fs-skin2:is(.fs-online-app,.fs-embed) body:has(.s2-gif){background:var(--s2-bg)} html.fs-skin2 .s2-gif{box-sizing:border-box;padding:0 16px 24px;background:var(--s2-bg);color:var(--s2-text)} @media (min-width:768px){html.fs-skin2 .s2-gif{padding:0 24px 32px}} html.fs-skin2 .s2-gif-head{padding:16px 4px 12px} html.fs-skin2 .s2-gif-title{color:var(--s2-text);font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.2} html.fs-skin2 .s2-gif-sub{margin-top:4px;color:var(--s2-muted);font-size:14px;font-weight:600;line-height:1.4} html.fs-skin2 .s2-gif-cols{display:flex;flex-direction:column;gap:16px} @media (min-width:768px){html.fs-skin2 .s2-gif-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,min(420px,44%));column-gap:24px;align-items:start}} html.fs-skin2 .s2-gif-card{box-sizing:border-box;padding:16px;border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip);color:var(--s2-text)} html.fs-skin2 :is(.s2-gif-main,.s2-gif-side){display:flex;flex-direction:column;gap:12px;min-width:0} /* 오프닝 GIF 줄은 입력 카드 바로 아래(2026-10-26 사용자 지시) */ html.fs-skin2 .s2-gif #gif-form{margin:0} html.fs-skin2 .s2-gif #gif-form label{display:block;margin:14px 0 6px;color:var(--s2-text);font-size:14px;font-weight:800;line-height:1.3} html.fs-skin2 .s2-gif #gif-form label:first-child{margin-top:0} html.fs-skin2 .s2-gif #gif-form :is(input,textarea){display:block;box-sizing:border-box;width:100%;margin:0;padding:12px 14px;border:1.5px solid var(--s2-line)!important;border-radius:14px;background:var(--s2-surface2);color:var(--s2-text);font-size:16px;line-height:1.4;outline:0} html.fs-skin2 .s2-gif #gif-form :is(input,textarea):focus{border-color:var(--s2-accent)!important} html.fs-skin2 .s2-gif #gif-form textarea{resize:vertical} html.fs-skin2 .s2-gif #gif-form :is(input,textarea)::placeholder{color:var(--s2-muted);opacity:.8} /* 생성 버튼 = 랜딩 빠른 매칭 버튼과 같은 금색 */ html.fs-skin2 .s2-gif .btngif,html.fs-skin2 .s2-gif .btngif:hover,html.fs-skin2 .s2-gif .btngif:disabled{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin:18px 0 0;padding:6px 16px;border:0;border-radius:18px;background:var(--s2-cta);color:var(--s2-cta-ink);font-size:17px;font-weight:900;line-height:1.15;box-shadow:0 4px 0 var(--s2-cta-lip);transition:transform .08s ease,box-shadow .08s ease} html.fs-skin2 .s2-gif .btngif:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--s2-cta-lip)} html.fs-skin2 .s2-gif .btngif:disabled{opacity:.6} /* 안내·결과 상자(보이기·숨기기는 스크립트가 display 로) */ html.fs-skin2 .s2-gif :is(#loading-message,#result-message){margin:0;padding:14px 16px;border-radius:18px;font-size:15px;font-weight:700;line-height:1.45} html.fs-skin2 .s2-gif #loading-message{border:1px solid var(--s2-gold-line);background:var(--s2-gold-tint);color:var(--s2-text)} html.fs-skin2 .s2-gif #result-message{border:1px solid var(--s2-line);background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip);color:var(--s2-text)} html.fs-skin2 .s2-gif #result-message a{color:var(--s2-accent)!important} html.fs-skin2 .s2-gif #result-message img{border-radius:12px} html.fs-skin2 .s2-gif #default-message{padding:12px;text-align:center} html.fs-skin2 .s2-gif #default-message img{display:block;width:100%;max-width:400px;height:auto;margin:0 auto;border-radius:12px} html.fs-skin2 .s2-gif .s2-gif-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 16px;color:var(--s2-text)!important;font-size:15px;font-weight:800;line-height:1.3;text-decoration:none!important} html.fs-skin2 .s2-gif .s2-gif-link svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--s2-muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ── 연결 상태(connection.php, 한국어·다국어 웹·앱 한 파일, 관리자 미리보기 2026-10-26) ─────────────────────────────────────── 표식 = main.fs-net.s2-conn. 검은 제목 띠 → 큰 제목(26px), 게이지·칸 기준 표는 새 스타일 카드, 바탕 회색 판. 색은 connection.css 변수(--nt-*)를 새 스타일 값으로. 2단(게이지 두 개 나란히)은 768px 이상(예전 641px), 1단 좌우 16px·2단 웹 24px. 흰 띠·아래 채움은 맨 위 공용 묶음 */ html.fs-skin2 body.fs-net-page{background:var(--s2-bg)} html.fs-skin2 main.fs-net.s2-conn{--nt-fg:var(--s2-text);--nt-mut:var(--s2-muted);--nt-bd:var(--s2-line);--nt-card:var(--s2-surface);--nt-soft:var(--s2-surface2);--nt-px:16px; max-width:none;margin:0;padding:0 16px 24px;background:var(--s2-bg)} @media (min-width:768px){html.fs-skin2 main.fs-net.s2-conn{--nt-px:24px;padding:0 24px 32px}} html.fs-skin2 main.fs-net.s2-conn .fs-net-bar{height:auto;min-height:56px;margin:0 0 4px;padding:16px 4px 12px!important;background:transparent;color:var(--s2-text);overflow:visible} html.fs-skin2 main.fs-net.s2-conn .fs-net-bar h1{color:var(--s2-text);font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.2} html.fs-skin2 main.fs-net.s2-conn .fs-home-back:not(.plain){color:var(--s2-text)!important} html.fs-skin2 main.fs-net.s2-conn .fs-home-back:not(.plain) svg{stroke:var(--s2-text)!important} html.fs-skin2 main.fs-net.s2-conn .fs-home-back:active{background:var(--s2-chip)} html.fs-skin2 main.fs-net.s2-conn .fs-net__answer{margin:0 4px 4px;font-size:20px;font-weight:900} html.fs-skin2 main.fs-net.s2-conn .fs-net__intro{margin:0 4px 16px} html.fs-skin2 main.fs-net.s2-conn .fs-net__gauges{grid-template-columns:minmax(0,1fr)} @media (min-width:768px){html.fs-skin2 main.fs-net.s2-conn .fs-net__gauges{grid-template-columns:repeat(2,minmax(0,1fr))}} html.fs-skin2 main.fs-net.s2-conn :is(.fs-net-gauge,.fs-net-legend){border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 main.fs-net.s2-conn .fs-net-gauge{padding:16px} html.fs-skin2 main.fs-net.s2-conn h2{font-size:16px;font-weight:900} html.fs-skin2 main.fs-net.s2-conn .fs-net__section{margin-top:22px} html.fs-skin2 main.fs-net.s2-conn .fs-net__section>:is(h2,p){margin-left:4px;margin-right:4px} html.fs-skin2 main.fs-net.s2-conn .fs-net-legend li{padding:10px 16px} /* ── 아레나 안내(arena.php)·후원(donate.php): 같은 틀(제목 카드 + 설명 카드 격자), 관리자 미리보기 2026-10-26 ───────────────────── 표식 = main.s2-pg(.arena-guide·.donate-guide). 제목 카드 → 큰 제목 줄(26px), 설명 카드 → 새 스타일 카드(22px·선·lip), 바탕 회색 판. 카드 안 결제 수단·후원 단계·명단 등 안쪽 구성은 그대로. 2단 격자는 768px 이상(예전 621px), 1단 좌우 16px·2단 웹 24px. 앱 팝업(.arena-guide-popup)도 같은 값 */ html.fs-skin2 body:is(.arena-guide-popup,.donate-guide-popup,.fs-app):has(main.s2-pg),html.fs-skin2:is(.fs-embed,.fs-online-app) body:has(main.s2-pg){background:var(--s2-bg)} html.fs-skin2 main.s2-pg:is(.arena-guide,.donate-guide){width:auto;max-width:none;margin:0;padding:0 16px 24px;background:var(--s2-bg);color:var(--s2-text)} @media (min-width:768px){html.fs-skin2 main.s2-pg:is(.arena-guide,.donate-guide){padding:0 24px 32px}} html.fs-skin2 main.s2-pg :is(.arena-guide__back,.donate-guide__back){margin:14px 4px 0;color:var(--s2-accent)!important;font-size:13px} html.fs-skin2 main.s2-pg :is(.arena-guide__hero,.donate-guide__hero){padding:16px 4px 12px;border:0;border-radius:0;background:transparent;box-shadow:none} html.fs-skin2 main.s2-pg :is(.arena-guide__hero,.donate-guide__hero) h1{color:var(--s2-text);font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.2} html.fs-skin2 main.s2-pg :is(.arena-guide__icon,.donate-guide__icon){width:36px;height:36px;border-radius:12px;background:var(--s2-gold-tint);color:var(--s2-gold)} html.fs-skin2 main.s2-pg :is(.arena-guide__intro,.donate-guide__intro){color:var(--s2-muted);font-size:14px} html.fs-skin2 main.s2-pg :is(.arena-guide__grid,.donate-guide__grid){grid-template-columns:minmax(0,1fr);gap:12px;margin-top:4px} @media (min-width:768px){html.fs-skin2 main.s2-pg :is(.arena-guide__grid,.donate-guide__grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}} html.fs-skin2 main.s2-pg :is(.arena-guide__card,.donate-guide__card){padding:16px;border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 main.s2-pg :is(.arena-guide__card,.donate-guide__card) h2{color:var(--s2-text);font-size:16px;font-weight:900} html.fs-skin2 main.s2-pg :is(.arena-guide__card,.donate-guide__card) p{color:var(--s2-muted)} html.fs-skin2 main.s2-pg.arena-guide .arena-guide__cta>a,html.fs-skin2 main.s2-pg.arena-guide .arena-guide__cta>a:is(:link,:visited,:hover,:focus){min-height:48px;padding:0 24px;border:1px solid var(--s2-line);border-radius:16px;background:var(--s2-surface);color:var(--s2-text)!important;box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 body.arena-guide-popup main.s2-pg.arena-guide{padding:8px 12px 20px} /* ── 데일리 아레나 기록·회차 상세(arena_history.php, 관리자 미리보기 2026-10-26) ───────────────────────────────────────── 표식 = main.ah-page.s2-pg. 검은 제목 띠 → 큰 제목(26px), 회차 카드·머리 카드·순위 등 상자 → 새 스타일 카드, 바탕 회색 판. 카드 안 시상대·순위표·대국 결과 행 구성은 그대로. 1단 좌우 16px·2단 웹 24px */ html.fs-skin2 body.ah-standalone:has(main.s2-pg){background:var(--s2-bg)} html.fs-skin2 main.ah-page.s2-pg{max-width:none;margin:0;padding:0 16px 24px!important;background:var(--s2-bg);color:var(--s2-text)} @media (min-width:768px){html.fs-skin2 main.ah-page.s2-pg{padding:0 24px 32px!important}} html.fs-skin2 main.ah-page.s2-pg .ah-titlebar{height:auto;min-height:56px;margin:0 0 4px!important;padding:16px 4px 12px!important;background:transparent;color:var(--s2-text);line-height:1.2;overflow:visible} html.fs-skin2 main.ah-page.s2-pg .ah-title{color:var(--s2-text);font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.2} html.fs-skin2 main.ah-page.s2-pg .ah-titlebar .fs-home-back:not(.plain){color:var(--s2-text)!important} html.fs-skin2 main.ah-page.s2-pg .ah-titlebar .fs-home-back:not(.plain) svg{stroke:var(--s2-text)!important} html.fs-skin2 main.ah-page.s2-pg .ah-titlebar .fs-home-back:active{background:var(--s2-chip)} html.fs-skin2 main.ah-page.s2-pg :is(.ah-card,.ah-hero,.ah-section){border:1px solid var(--s2-line)!important;border-radius:22px;background:var(--s2-surface)!important;box-shadow:0 3px 0 var(--s2-lip)!important} html.fs-skin2 main.ah-page.s2-pg .ah-card{padding:14px 16px} html.fs-skin2 main.ah-page.s2-pg .ah-hero{padding:16px} html.fs-skin2 main.ah-page.s2-pg .ah-podium-card{border-color:var(--s2-line);border-radius:14px;background:var(--s2-surface2)} html.fs-skin2 main.ah-page.s2-pg section.ah-section>h2{background:var(--s2-surface)!important;border-bottom-color:var(--s2-line)!important;color:var(--s2-text)!important;font-size:16px;font-weight:900} html.fs-skin2 main.ah-page.s2-pg .ah-list{gap:12px} /* ── 오프닝(정석) 사전(gif/openings.php·en/gif/openings.php, 공개 주소 /flipsight/openings, 관리자 미리보기 2026-10-26) ───────────────── 표식 = .s2-op(한국어는 제목·본문 감싸개, 다국어는 .text). 검은 제목 띠 → 큰 제목, 카테고리 상자 → 새 스타일 카드(머리 흰 바탕), 필터·검색 → 칩·입력칸. 펼친 하위 오프닝 줄·승률 막대·GIF 칸 구성은 그대로. 1단 좌우 16px·2단 웹 24px */ html.fs-skin2:is(.fs-online-app,.fs-embed) body:has(.s2-op){background:var(--s2-bg)} html.fs-skin2 .s2-op{box-sizing:border-box;max-width:none!important;margin:0!important;padding:0 16px 24px;background:var(--s2-bg);color:var(--s2-text)} @media (min-width:768px){html.fs-skin2 .s2-op{padding:0 24px 32px}} html.fs-skin2 .s2-op .level-section{margin:0!important;overflow:visible} html.fs-skin2 .s2-op .level-title.pz-title-bar{height:auto!important;min-height:56px;margin:0!important;padding:16px 4px 12px!important;background:transparent!important;color:var(--s2-text)!important;font-size:26px!important;font-weight:900;letter-spacing:-.6px;line-height:1.2!important;overflow:visible} html.fs-skin2 .s2-op .icontents{padding:0} html.fs-skin2 .s2-op .op-intro-row{margin:0 4px;color:var(--s2-muted);font-size:14px;line-height:1.5} html.fs-skin2 .s2-op :is(.op-flt,.op-cbtn){border:1px solid var(--s2-line);background:var(--s2-surface);color:var(--s2-text);-webkit-text-fill-color:var(--s2-text);box-shadow:0 2px 0 var(--s2-lip)} html.fs-skin2 .s2-op .op-cbtn.active{border-color:var(--s2-accent);background:var(--s2-accent-tint);box-shadow:inset 0 0 0 1px var(--s2-accent)} html.fs-skin2 .s2-op :is(.op-flt-input,.op-search-input,.op-fm-select){border:1px solid var(--s2-line);border-radius:12px;background:var(--s2-surface);color:var(--s2-text);-webkit-text-fill-color:var(--s2-text)} html.fs-skin2 .s2-op :is(.op-flt-input,.op-search-input,.op-fm-select):focus{outline:0;border-color:var(--s2-accent)} html.fs-skin2 .s2-op #op-filter{color:var(--s2-text)} html.fs-skin2 .s2-op .op-cat{margin-bottom:12px;border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 .s2-op .op-cat>.op-head{padding:12px 14px;background:var(--s2-surface);color:var(--s2-text)} html.fs-skin2 .s2-op .op-cat>.op-head:hover{background:var(--s2-surface2)} html.fs-skin2 .s2-op .op-cat>.op-head .op-name{font-size:17px;font-weight:900} html.fs-skin2 .s2-op .op-cat>.op-head .op-thumb{border-radius:10px} html.fs-skin2 .s2-op .op-cat>.op-head .op-stone.b{border-color:#111827}html.fs-skin2 .s2-op .op-cat>.op-head .op-stone.w{border-color:#111827} html.fs-skin2 .s2-op .op-cat>.op-head .op-eval-pos{color:#1a8c3a;-webkit-text-fill-color:#1a8c3a} html.fs-skin2 .s2-op .op-cat>.op-head .op-eval-neg{color:#d23030;-webkit-text-fill-color:#d23030} html.fs-skin2 .s2-op .op-cat>.op-head .op-eval-zero{color:#888;-webkit-text-fill-color:#888} html.fs-skin2.fs-app-theme-dark .s2-op .op-cat>.op-head .op-eval-pos{color:#5fd38a;-webkit-text-fill-color:#5fd38a} html.fs-skin2.fs-app-theme-dark .s2-op .op-cat>.op-head .op-eval-neg{color:#ff5252;-webkit-text-fill-color:#ff5252} html.fs-skin2.fs-app-theme-dark .s2-op .op-cat>.op-head .op-eval-zero{color:#cbd2d9;-webkit-text-fill-color:#cbd2d9} html.fs-skin2.fs-app-theme-dark .s2-op .op-cat>.op-head .op-stone.b{border-color:#fff} html.fs-skin2 .s2-op .op-row{border-top:1px solid var(--s2-line)} html.fs-skin2 .s2-op .op-row .op-head{background:transparent;color:var(--s2-text)} html.fs-skin2 .s2-op .op-row .op-head:hover{background:var(--s2-surface2)} html.fs-skin2 .s2-op .op-refs{margin:22px 4px 0;border-top-color:var(--s2-line);color:var(--s2-muted)} html.fs-skin2 .s2-op .op-refs-title{color:var(--s2-text)} html.fs-skin2 .s2-op .op-refs-list a{color:var(--s2-accent)} /* ── 레슨(lesson.php 목차·강의, 공개 주소 /flipsight/lessons, 2026-10-26) ─────────────────────────────────────────────── 표식 = main.fs-lesson.s2-ls. 검은 제목 띠 → 큰 제목(강의는 ← 목차 줄), 목차 머리·장 카드·이전/다음 → 새 스타일 카드, 강의 본문은 흰 카드 안(회색 바탕에서 읽히게). 본문 안 보드·문제·팁·핵심 상자 구성은 그대로. 색은 lesson.css 변수(--ls-*)를 새 스타일 값으로. 1단 좌우 16px·2단 웹 24px */ html.fs-skin2 body.fs-lesson-page,html.fs-skin2:is(.fs-online-app,.fs-embed) body:has(main.s2-ls){background:var(--s2-bg)} html.fs-skin2 main.fs-lesson.s2-ls{--ls-fg:var(--s2-text);--ls-mut:var(--s2-muted);--ls-bd:var(--s2-line);--ls-card:var(--s2-surface);--ls-soft:var(--s2-surface2);--ls-pri:var(--s2-accent);--ls-px-l:16px;--ls-px-r:16px; max-width:none;margin:0;padding:0 16px 24px;background:var(--s2-bg)} @media (min-width:768px){html.fs-skin2 main.fs-lesson.s2-ls{--ls-px-l:24px;--ls-px-r:24px;padding:0 24px 32px}} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson-bar{height:auto;min-height:56px;margin:0 0 4px;padding:16px 4px 12px!important;background:transparent;color:var(--s2-text);overflow:visible} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson-bar h1{color:var(--s2-text);font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.2} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson-bar__back{color:var(--s2-text);font-size:15px;font-weight:800} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson-bar__back svg{margin:0 6px 0 0} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson-bar__back:active{background:var(--s2-chip)} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson-bar__back:focus-visible{outline-color:var(--s2-accent)} html.fs-skin2 main.fs-lesson.s2-ls :is(.fs-lesson__chapter,.fs-lesson__nav a){border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 main.fs-lesson.s2-ls.fs-lesson--index .fs-lesson__header{border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__chapter.is-upcoming{background:transparent;box-shadow:none;border-style:dashed} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__chapter li a{border-radius:14px} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__chapter li a:hover{border-color:var(--s2-accent);background:var(--s2-surface)} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__chapter-num{border-radius:10px;background:var(--s2-accent-tint);color:var(--s2-accent)} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__meta span{border-radius:999px;background:var(--s2-surface2)} /* 강의: 머리말은 회색 판 위, 본문은 흰 카드 */ html.fs-skin2 main.fs-lesson.s2-ls.fs-lesson--detail .fs-lesson__header{max-width:820px;padding:4px 4px 16px;border-bottom:0} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__article{max-width:820px;padding:20px 20px 8px;border:1px solid var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)} @media (min-width:768px){html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__article{padding:28px 30px 12px}} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__completion{max-width:820px;margin-left:auto;margin-right:auto} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__nav{max-width:820px;margin-top:20px;padding-top:0;border-top:0} html.fs-skin2 main.fs-lesson.s2-ls .fs-lesson__nav a:hover{border-color:var(--s2-accent);background:var(--s2-surface)}