/* Dark Meridian - "구글 시트" 위장 테마 목적: 사무실에서 켜놔도 언뜻 봐서는 스프레드시트로 보이게. F9 또는 우상단 아바타 버튼으로 전환. data-theme="sheets"가 에 붙어있을 때만 적용되고, main.css는 그대로 로드된 채 변수/선택자로 덮어쓰는 방식이라(별도 페이지 마크업 없이 nav.jspf/meta.jspf 한 곳씩만 건드림) 두 테마를 언제든 서로 되돌릴 수 있다. */ /* ============ 테마 토글 버튼 (두 테마 공통, 항상 존재) ============ */ .theme-toggle-btn { position: fixed; top: 0.6rem; right: 0.6rem; z-index: 1200; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 13, 20, 0.55); color: #cfd6e4; font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 0.15s ease, transform 0.15s ease; } .theme-toggle-btn:hover, .theme-toggle-btn:focus-visible { opacity: 1; transform: scale(1.06); outline: none; } /* 기본(다크) 테마에서는 위 스프레드시트 크롬을 아예 렌더링하지 않는다 */ .sheet-chrome, .sheet-rowheader, .sheet-tabs, .sheet-share-btn { display: none; } /* ================================================================== 아래부터는 html[data-theme="sheets"]일 때만 적용 ================================================================== */ html[data-theme="sheets"] { color-scheme: light; } /* main.css 전역에서 이미 이 변수들로 배경/테두리/텍스트/포인트색을 참조하고 있어서, 변수만 갈아끼워도 패널/카드/툴팁/뱃지/표 등 대부분이 자동으로 시트 톤으로 바뀐다. */ html[data-theme="sheets"] { --bg: #ffffff; --bg-glow: #f8f9fa; --panel: #ffffff; --panel-alt: #f8f9fa; --panel-raised: #f1f3f4; --border: #dadce0; --border-soft: #e1e3e6; --text: #202124; --text-muted: #5f6368; --gold: #188038; --gold-dim: #34a853; --blood: #d93025; --link: #1a73e8; --focus: #1a73e8; --shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px rgba(60, 64, 67, 0.15); /* 배경 격자와 버튼/입력창/네브/게이지/글꼴 줄높이까지 전부 이 한 값을 기준으로 맞춘다. 구글 시트 기본 행 높이(21px)에 가깝게 20px로 잡고, 본문 line-height도 여기 맞춰서 텍스트 자체가 격자 눈금 위에 앉도록 한다. 가로(--sheet-col)는 한글 텍스트 길이가 들쭉날쭉해서 셀 폭에 못 맞추므로 장식용 배경 격자에만 쓴다. */ --sheet-row: 20px; --sheet-col: 100px; } html[data-theme="sheets"] body { font-family: 'Roboto', 'Malgun Gothic', Arial, sans-serif; font-size: 13px; line-height: var(--sheet-row); background: repeating-linear-gradient(0deg, rgba(60, 64, 67, 0.05) 0, rgba(60, 64, 67, 0.05) 1px, transparent 1px, transparent var(--sheet-row)), repeating-linear-gradient(90deg, rgba(60, 64, 67, 0.05) 0, rgba(60, 64, 67, 0.05) 1px, transparent 1px, transparent var(--sheet-col)), var(--bg); background-attachment: fixed; /* 위쪽 = 메뉴바+툴바+수식입력줄+열머리글, 왼쪽 = 행머리글 자리, 아래쪽 = 시트 탭 줄 자리를 비워둔다 */ padding-top: 126px; padding-left: 30px; padding-bottom: 34px; } html[data-theme="sheets"] ::selection { background: rgba(26, 115, 232, 0.22); color: #202124; } /* ============ 상단 가짜 스프레드시트 크롬 ============ */ html[data-theme="sheets"] .sheet-chrome { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #e1e3e6; pointer-events: none; user-select: none; font-family: 'Roboto', Arial, sans-serif; } html[data-theme="sheets"] .sheet-menubar { display: flex; align-items: center; gap: 0.65rem; height: 32px; padding: 0 0.75rem 0 0.6rem; font-size: 0.82rem; color: #3c4043; overflow: hidden; white-space: nowrap; } html[data-theme="sheets"] .sheet-doc-icon { color: #0f9d58; font-size: 1.05rem; flex-shrink: 0; } html[data-theme="sheets"] .sheet-doc-title { font-weight: 500; color: #202124; margin-right: 0.5rem; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme="sheets"] .sheet-menu-items { display: flex; flex-shrink: 0; gap: 0.85rem; color: #5f6368; font-size: 0.8rem; white-space: nowrap; } html[data-theme="sheets"] .sheet-toolbar { display: flex; align-items: center; gap: 0.5rem; height: 40px; padding: 0 0.6rem; border-top: 1px solid #f1f3f4; font-size: 0.85rem; color: #3c4043; overflow: hidden; white-space: nowrap; } html[data-theme="sheets"] .sheet-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.6rem; padding: 0 0.15rem; border-radius: 4px; color: #5f6368; } html[data-theme="sheets"] .sheet-tool-b { font-weight: 700; color: #3c4043; } html[data-theme="sheets"] .sheet-tool-i { font-style: italic; color: #3c4043; } html[data-theme="sheets"] .sheet-tool-u { text-decoration: underline; color: #3c4043; } html[data-theme="sheets"] .sheet-sep { width: 1px; height: 1.4rem; background: #e1e3e6; margin: 0 0.15rem; } html[data-theme="sheets"] .sheet-formulabar { display: flex; align-items: center; gap: 0.6rem; height: 28px; padding: 0 0.6rem; border-top: 1px solid #f1f3f4; font-size: 0.82rem; } html[data-theme="sheets"] .sheet-cellref { min-width: 3.2rem; color: #3c4043; font-weight: 500; } html[data-theme="sheets"] .sheet-fx { font-style: italic; color: #5f6368; border-right: 1px solid #e1e3e6; padding-right: 0.6rem; } html[data-theme="sheets"] .sheet-formula-input { flex: 1; color: #202124; } /* 열 머리글(A, B, C...) - 왼쪽 30px(행머리글 자리)만큼 들여써서 그 칸은 자연히 빈 코너가 된다 */ html[data-theme="sheets"] .sheet-colheader { display: flex; height: 22px; margin-left: 30px; background: #f8f9fa; border-top: 1px solid #e1e3e6; overflow: hidden; } html[data-theme="sheets"] .sheet-colheader span { flex: 0 0 90px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: #5f6368; border-right: 1px solid #e1e3e6; } /* 행 머리글(1, 2, 3...) - 크롬 아래부터 화면 끝까지, 클릭은 통과시킨다 */ html[data-theme="sheets"] .sheet-rowheader { display: flex; flex-direction: column; position: fixed; top: 126px; left: 0; bottom: 0; width: 30px; background: #f8f9fa; border-right: 1px solid #e1e3e6; z-index: 999; pointer-events: none; user-select: none; overflow: hidden; } html[data-theme="sheets"] .sheet-rowheader span { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: #5f6368; border-bottom: 1px solid #e1e3e6; } /* ============ 테마 토글 버튼을 "계정 아바타"처럼 ============ */ html[data-theme="sheets"] .theme-toggle-btn { top: 4px; right: 14px; width: 26px; height: 26px; z-index: 1200; border: none; background: linear-gradient(135deg, #7b5ec9, #4a6ee0); color: #fff; font-weight: 600; font-size: 0.8rem; opacity: 1; pointer-events: auto; } /* ============ 우상단 "공유" 버튼 - 실제 캡처들을 보니 아바타 옆 공유 버튼이 시트 특유의 신호였다 ============ */ html[data-theme="sheets"] .sheet-share-btn { display: flex; position: fixed; top: 4px; right: 56px; z-index: 1200; align-items: center; height: 26px; padding: 0 0.9rem; border-radius: 4px; background: #0b57d0; color: #fff; font-size: 0.78rem; font-weight: 500; pointer-events: none; user-select: none; } /* ============ 하단 시트 탭 줄 - 순수 장식, 클릭은 통과시킨다 ============ */ html[data-theme="sheets"] .sheet-tabs { display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; height: 34px; padding: 0 0.5rem; gap: 0.3rem; background: #f8f9fa; border-top: 1px solid #e1e3e6; z-index: 999; pointer-events: none; user-select: none; font-size: 0.8rem; color: #5f6368; } html[data-theme="sheets"] .sheet-tabs-menu, html[data-theme="sheets"] .sheet-tabs-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } html[data-theme="sheets"] .sheet-tab { display: inline-flex; align-items: center; height: 26px; padding: 0 0.7rem; border-radius: 4px 4px 0 0; flex-shrink: 0; white-space: nowrap; } html[data-theme="sheets"] .sheet-tab-active { background: #fff; color: #188038; font-weight: 600; box-shadow: inset 0 2px 0 #188038; } /* 새로 생긴 하단 시트 탭 줄과 겹치지 않도록, 인벤토리 선택 액션바를 그만큼 띄운다 */ html[data-theme="sheets"] .inventory-selection-bar { bottom: calc(1.25rem + 34px); } /* ============ 제목(h1) - 큰 금빛 배너 대신 조용한 문서 라벨 ============ */ html[data-theme="sheets"] h1 { font-family: 'Roboto', Arial, sans-serif; text-align: left; text-shadow: none; font-size: 0.95rem; font-weight: 500; color: #5f6368; letter-spacing: normal; border-bottom: none; margin: 0 0 0.9rem; padding-bottom: 0; } html[data-theme="sheets"] h2, html[data-theme="sheets"] h3 { font-family: 'Roboto', Arial, sans-serif; letter-spacing: normal; color: #202124; background: #f8f9fa; border: 1px solid #e1e3e6; border-bottom: 1px solid #e1e3e6; border-radius: 4px; padding: 0.4rem 0.6rem; } /* ============ 네비게이션 - 진짜 탭처럼 서로 맞붙인 세그먼트 컨트롤 ============ */ html[data-theme="sheets"] .nav { background: #fff; border: 1px solid #e1e3e6; border-radius: 3px; backdrop-filter: none; box-shadow: none; gap: 0; padding: 0; overflow: hidden; } html[data-theme="sheets"] .nav a { color: #3c4043; font-size: 0.8125rem; border-radius: 0; padding: 0 0.7rem; min-height: calc(var(--sheet-row) + 8px); display: flex; align-items: center; border-right: 1px solid #e1e3e6; } html[data-theme="sheets"] .nav a:last-of-type { border-right: none; } html[data-theme="sheets"] .nav a:hover, html[data-theme="sheets"] .nav a:focus-visible { color: #1a73e8; background: #e8f0fe; } html[data-theme="sheets"] .nav a.is-active { color: #0b8043; background: #e6f4ea; box-shadow: inset 0 -2px 0 #34a853; } html[data-theme="sheets"] .nav .nav-logout { color: #d93025; } /* ============ 콘텐츠 표면(패널/모달/강화패널) - 흰 배경만이 아니라 옅은 셀 그리드가 비치게 ============ main.css 원본은 카드마다 둥근 모서리+그림자로 "떠 있는 패널" 느낌을 주는데, 그게 바로 이 테마를 어정쩡하게 만드는 원인이었다(배경색만 바뀐 카드 UI). 모서리를 거의 없애고, 그림자 대신 옅은 격자 배경을 깔아서 패널 자체가 "시트 위의 한 영역을 선택해놓은 범위"처럼 보이게 한다. */ html[data-theme="sheets"] .panel, html[data-theme="sheets"] .modal-box, html[data-theme="sheets"] .enhance-panel { background-color: #fff; background-image: repeating-linear-gradient(0deg, rgba(60, 64, 67, 0.07) 0, rgba(60, 64, 67, 0.07) 1px, transparent 1px, transparent var(--sheet-row)), repeating-linear-gradient(90deg, rgba(60, 64, 67, 0.07) 0, rgba(60, 64, 67, 0.07) 1px, transparent 1px, transparent var(--sheet-col)); border-radius: 2px; box-shadow: none; /* 안쪽 콘텐츠가 격자 선 위에서 시작/끝나도록 위아래 패딩만 행 높이의 배수로 맞춘다 (좌우는 main.css의 반응형 clamp() 패딩을 그대로 둔다 - 가로는 어차피 안 맞출 거라 굳이 고정폭으로 바꿔서 좁은 화면 레이아웃을 깨뜨릴 이유가 없다). */ padding-top: var(--sheet-row); padding-bottom: var(--sheet-row); } /* choice-summary는 좌측 색띠가 정체성이라 전체 테두리는 그대로 두고 격자 배경만 얹는다 */ html[data-theme="sheets"] .choice-summary { background-color: rgba(52, 168, 83, 0.04); background-image: repeating-linear-gradient(0deg, rgba(60, 64, 67, 0.06) 0, rgba(60, 64, 67, 0.06) 1px, transparent 1px, transparent var(--sheet-row)); } /* ============ 통계/아이템 카드 그리드 - 간격을 좁혀서 이어붙인 셀처럼 ============ */ html[data-theme="sheets"] .stat-grid, html[data-theme="sheets"] .card-grid { gap: 2px; } /* 카드를 투명하게 비워 패널 격자가 그대로 비치게 했더니, 표처럼 자체 테두리가 촘촘한 콘텐츠 위에서는 격자+테두리가 겹쳐 오히려 더 산만해졌다("표 뒤에 격자까지 있어서 정신없다" 피드백) - 실제 스프레드시트도 데이터가 들어있는 셀은 그냥 흰 배경이고(빈 셀에서만 옅은 격자가 보임), 테두리를 또렷하게 그은 범위는 불투명하게 되돌린다. */ html[data-theme="sheets"] .stat-card, html[data-theme="sheets"] .item-card { background: #fff; border-radius: 0; } html[data-theme="sheets"] a.item-card:hover { transform: none; } /* ============ 버튼 - 시트에 그려놓은 사각형처럼, 실제 구글 시트 툴바 버튼 높이(28px 안팎)에 맞춘다 ============ 이전엔 배경을 흰색으로 칠하고 높이도 48px(격자 2줄)로 키웠는데, 그러니 오히려 "버튼처럼 큼직한 UI 위젯"으로 도드라져서 반대로 더 튀었다. 배경을 투명하게 비워 패널 격자가 버튼 면 위로도 그대로 비치게 하고, 높이는 실제 시트 툴바 버튼 크기(글자 높이 20px + 여백 8px)로 낮춘다. */ html[data-theme="sheets"] button, html[data-theme="sheets"] .btn { background: transparent; color: #3c4043; border: 1px solid #dadce0; border-radius: 0; font-weight: 500; font-size: 0.8125rem; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--sheet-row) + 8px); padding: 0.15rem 0.6rem; /* line-height: normal은 한글 폴백 폰트(맑은 고딕 등)의 line-height 메트릭이 라틴 폰트보다 훨씬 커서 버튼이 min-height를 훌쩍 넘어 부풀어 보이는 원인이었다 - 값을 고정해서 폰트 메트릭에 휘둘리지 않게 한다(flex 중앙정렬은 align-items가 하므로 1이어도 텍스트는 그대로 가운데). */ line-height: 1; } html[data-theme="sheets"] button:hover:not(:disabled), html[data-theme="sheets"] .btn:hover { background: #f1f3f4; border-color: #c6c9cd; transform: none; box-shadow: none; } html[data-theme="sheets"] .btn-primary { background: #188038; color: #fff; border-color: #188038; } html[data-theme="sheets"] .btn-primary:hover { background: #0f9d58; border-color: #0f9d58; } html[data-theme="sheets"] .btn-gold { background: transparent; color: #b06000; border-color: #dadce0; } html[data-theme="sheets"] .btn-gold:hover { box-shadow: none; background: #fdecc0; } /* 버튼 여러 개가 한 줄에 나열되는 곳(전투 액션 등)은 간격을 없애고 테두리를 맞붙여서 시트 툴바의 정렬/서식 버튼 묶음처럼 하나의 세그먼트 컨트롤로 보이게 한다. */ html[data-theme="sheets"] .btn-row { gap: 0; } html[data-theme="sheets"] .btn-row > button, html[data-theme="sheets"] .btn-row > .btn { border-radius: 0; margin-left: -1px; } html[data-theme="sheets"] .btn-row > button:first-child, html[data-theme="sheets"] .btn-row > .btn:first-child { margin-left: 0; } html[data-theme="sheets"] .btn-row > button:hover, html[data-theme="sheets"] .btn-row > .btn:hover { position: relative; z-index: 1; } /* ============ 입력 폼 ============ */ html[data-theme="sheets"] input[type="text"], html[data-theme="sheets"] input[type="password"], html[data-theme="sheets"] input[type="email"], html[data-theme="sheets"] input[type="number"], html[data-theme="sheets"] select { background: transparent; border: 1px solid #dadce0; border-radius: 0; box-sizing: border-box; height: calc(var(--sheet-row) + 8px); padding: 0 0.6rem; font-size: 0.8125rem; } html[data-theme="sheets"] input:focus, html[data-theme="sheets"] select:focus, html[data-theme="sheets"] button:focus-visible, html[data-theme="sheets"] .btn:focus-visible, html[data-theme="sheets"] a:focus-visible { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.22); } html[data-theme="sheets"] .form-group label { color: #5f6368; } /* ============ 표 - 실제 시트 데이터 범위처럼 불투명하고 또렷하게 ============ 표 배경까지 투명하게 비우면 패널의 옅은 격자가 표 셀 위에도 겹쳐 보여서, 표 자체 테두리와 합쳐져 두 겹의 격자가 서로 다른 리듬으로 겹치는 게 오히려 산만했다("표 뒤에 격자까지" 피드백). 불투명한 흰 배경으로 되돌리고, 셀 안쪽 줄높이만 --sheet-row에 맞춘다. */ html[data-theme="sheets"] table { background: #fff; border-radius: 0; } html[data-theme="sheets"] th, html[data-theme="sheets"] td { border-right: 1px solid #e1e3e6; padding: 0.3rem 0.5rem; line-height: var(--sheet-row); } html[data-theme="sheets"] th { background: rgba(60, 64, 67, 0.05); color: #3c4043; text-transform: none; font-weight: 500; font-size: 0.82em; } html[data-theme="sheets"] tbody tr:hover { background: rgba(26, 115, 232, 0.05); } /* ============ HP/MP/AP 게이지 - 엑셀/시트의 "데이터 막대" 조건부 서식처럼 ============ 단색 채우기 대신 엑셀 데이터 막대 특유의 그라데이션(진한 색 → 옅은 색)을 줘서 진짜 조건부 서식 막대처럼 보이게 한다. */ html[data-theme="sheets"] .bar { background: #f1f3f4; border: 1px solid #dadce0; border-radius: 2px; box-shadow: none; height: var(--sheet-row); } html[data-theme="sheets"] .bar-fill.hp { background: linear-gradient(90deg, #c5221f, #e8998d); } html[data-theme="sheets"] .card-low-hp { background: rgba(217, 48, 37, 0.1); } html[data-theme="sheets"] .bar-fill.mp { background: linear-gradient(90deg, #1967d2, #8ab4f8); } html[data-theme="sheets"] .bar-fill.ap { background: linear-gradient(90deg, #e37400, #fdd663); } html[data-theme="sheets"] .bar-fill.monster-hp { background: linear-gradient(90deg, #a50e0e, #e8998d); } html[data-theme="sheets"] .bar-label { color: #202124; text-shadow: none; } /* ============ 색상 차분하게 - 네온톤 등급/속성 색은 어두운 배경 기준이라 흰 배경에선 너무 알록달록하고, grade-normal은 아예 흰 글씨라 흰 배경에서 안 보이는 버그였다. 구글 머티리얼 팔레트 톤으로 낮춘다. ============ */ html[data-theme="sheets"] .grade-normal { color: #3c4043; } html[data-theme="sheets"] .grade-magic { color: #1a73e8; } html[data-theme="sheets"] .grade-rare { color: #9334e6; } html[data-theme="sheets"] .grade-unique { color: #e37400; } html[data-theme="sheets"] .grade-legendary { color: #d93025; } html[data-theme="sheets"] .grade-boss { color: #d93025; } html[data-theme="sheets"] .element-physical { color: #3c4043; } html[data-theme="sheets"] .element-fire { color: #e8710a; } html[data-theme="sheets"] .element-ice { color: #12a4af; } html[data-theme="sheets"] .element-lightning { color: #f9ab00; } html[data-theme="sheets"] .element-dark { color: #9334e6; } html[data-theme="sheets"] .element-holy { color: #b06000; } html[data-theme="sheets"] .element-poison { color: #188038; } html[data-theme="sheets"] .element-bleed { color: #d93025; } /* 등급 프레임의 네온 글로우도 흰 배경에선 그냥 얼룩져 보여서 은은한 테두리 색으로만 남긴다 */ html[data-theme="sheets"] .frame-normal { border-color: #dadce0 !important; } html[data-theme="sheets"] .frame-magic { border-color: #1a73e8 !important; box-shadow: none; } html[data-theme="sheets"] .frame-rare { border-color: #9334e6 !important; box-shadow: none; } html[data-theme="sheets"] .frame-unique { border-color: #e37400 !important; box-shadow: none; } html[data-theme="sheets"] .frame-legendary { border-color: #d93025 !important; box-shadow: none; } html[data-theme="sheets"] .frame-boss { border-color: #d93025 !important; box-shadow: none; } /* 전투 로그 줄 색도 같은 톤으로 - 검은 콘솔이 아니라 흰 장부 배경이라 채도를 더 낮춰야 한다 */ html[data-theme="sheets"] .log-name-ally { color: #1a73e8; } html[data-theme="sheets"] .log-name-enemy { color: #d93025; } html[data-theme="sheets"] .log-line-poison { color: #188038; } html[data-theme="sheets"] .log-line-bleed { color: #d93025; } html[data-theme="sheets"] .log-line-curse { color: #9334e6; } html[data-theme="sheets"] .log-line-dot { color: #b06000; } html[data-theme="sheets"] .log-line-regen { color: #188038; } html[data-theme="sheets"] .log-line-mpdot { color: #1a73e8; } html[data-theme="sheets"] .log-line-mpregen { color: #1a73e8; } html[data-theme="sheets"] .log-line-crit { color: #b06000; } /* 연한 초록/빨강 글자 위에 연한 반투명 배경을 까는 조합(main.css는 어두운 배경 기준이라 "밝은 텍스트 + 옅은 배경"이 잘 보였다)이 흰 배경에선 밝은 글자가 옅은 배경에 묻혀서 거의 안 보인다 - 에러/성공 메시지처럼 중요한 것까지 포함되어 있어 전부 진한 톤으로 다시 잡는다. */ html[data-theme="sheets"] .error { color: #d93025; } html[data-theme="sheets"] .success { color: #188038; } html[data-theme="sheets"] .bonus { color: #188038; } html[data-theme="sheets"] .slot-section-status.filled { color: #188038; } html[data-theme="sheets"] .enhance-resource { color: #188038; background: rgba(52, 168, 83, 0.08); } html[data-theme="sheets"] .enhance-resource.is-short { color: #d93025; background: rgba(217, 48, 37, 0.08); } html[data-theme="sheets"] .result-win, html[data-theme="sheets"] .result-success { background: rgba(52, 168, 83, 0.12); color: #188038; } html[data-theme="sheets"] .result-lose, html[data-theme="sheets"] .result-fail_downgrade { background: rgba(217, 48, 37, 0.12); color: #d93025; } html[data-theme="sheets"] .result-fail_safe { background: rgba(249, 171, 0, 0.15); color: #b06000; } html[data-theme="sheets"] .scroll-diff-delta.up { color: #188038; } html[data-theme="sheets"] .scroll-diff-delta.down { color: #d93025; } html[data-theme="sheets"] .battle-result-banner.banner-lost { color: #d93025; } html[data-theme="sheets"] .battle-result-banner.banner-fled { color: #5f6368; } /* 상점 뽑기 결과 카드의 네온 글로우도 마찬가지로 죽인다 (아래 모션 억제 섹션에서 애니메이션 자체도 끔) */ html[data-theme="sheets"] #gamble-result .item-card.reveal-magic, html[data-theme="sheets"] #gamble-result .item-card.reveal-rare, html[data-theme="sheets"] #gamble-result .item-card.reveal-unique, html[data-theme="sheets"] #gamble-result .item-card.reveal-legendary { box-shadow: none; } /* ============ 모션 억제 - 전투 이펙트/주사위/뽑기 반짝임은 "지금 게임하는 중"이 제일 티 나는 순간이라 시트 테마에선 아예 죽인다. battle-fx.js 등 스크립트는 평소처럼 그대로 동작하고(클래스만 붙였다 뗌), 여기서 그 클래스들의 시각 효과만 무력화한다. ============ */ html[data-theme="sheets"] .fx-lunge-ally, html[data-theme="sheets"] .fx-lunge-enemy, html[data-theme="sheets"] .fx-shake, html[data-theme="sheets"] .fx-shake-crit, html[data-theme="sheets"] .fx-shield, html[data-theme="sheets"] .fx-dodge, html[data-theme="sheets"] .fx-stun, html[data-theme="sheets"] .fx-absorb, html[data-theme="sheets"] .item-card.potion-flash, html[data-theme="sheets"] .dice-spin, html[data-theme="sheets"] #gamble-result .item-card.reveal-rare, html[data-theme="sheets"] #gamble-result .item-card.reveal-unique, html[data-theme="sheets"] #gamble-result .item-card.reveal-legendary { animation: none !important; } html[data-theme="sheets"] .battle-fx-projectile, html[data-theme="sheets"] .battle-fx-badge { display: none !important; } /* ============ 전투 카드(VS 레이아웃) - 가운데 정렬된 카드 대신 라벨행이 쌓인 미니 표처럼 ============ 기존 DOM 순서가 이미 아바타→이름→HP바→HP수치→MP바→MP수치로 세로로 쌓여 있어서, 마크업을 건드리지 않고도 각 자식에 구분선만 넣으면 그대로 한 칸짜리 표의 행들처럼 보인다. */ html[data-theme="sheets"] .vs-layout { gap: 2px; } html[data-theme="sheets"] .combatant-card { border-radius: 0; padding: 0; text-align: left; background: #fff; } /* 아군/적군 아바타 테두리가 main.css에선 네온 빨강/파랑 그대로라 흰 배경에서 너무 튀었다 */ html[data-theme="sheets"] .combatant-card.ally .avatar { background: transparent; border-color: #1a73e8; color: #1a73e8; } html[data-theme="sheets"] .combatant-card.enemy .avatar { background: transparent; border-color: #d93025; color: #d93025; } html[data-theme="sheets"] .combatant-card > * { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border-soft); } html[data-theme="sheets"] .combatant-card > *:last-child { border-bottom: none; } html[data-theme="sheets"] .combatant-card .avatar { border-radius: 2px; width: 20px; height: 20px; margin: 0; font-size: 0.7rem; font-family: 'Roboto', Arial, sans-serif; } html[data-theme="sheets"] .combatant-card .combatant-name { font-family: 'Roboto', Arial, sans-serif; font-weight: 600; margin-bottom: 0; } html[data-theme="sheets"] .combatant-card .bar { margin: 0; border-radius: 0; } html[data-theme="sheets"] .vs-divider { font-family: 'Roboto', Arial, sans-serif; color: #5f6368; font-weight: 700; } /* ============ 전투 로그 - 검은 콘솔 대신 불투명한 흰 장부(ledger)처럼 ============ 패널 격자가 로그 텍스트 위에 겹치면 읽기 산만해서 불투명하게 막고, 줄높이만 --sheet-row로 맞춰 "장부에 한 줄씩 적어내려간" 리듬만 남긴다. */ html[data-theme="sheets"] .turn-log { background: #fff; border: 1px solid var(--border-soft); border-radius: 0; color: #202124; font-family: 'Courier New', monospace; font-size: 0.8125rem; line-height: var(--sheet-row); } /* ============ 배지 - 필/뱃지 알약 모양 대신 각진 태그 ============ */ html[data-theme="sheets"] .locked-badge, html[data-theme="sheets"] .result-badge { border-radius: 2px; } /* ============ 툴팁 - 시트 메모(코멘트) 카드처럼 ============ */ html[data-theme="sheets"] .tip { border-bottom-color: #1a73e8; } html[data-theme="sheets"] .tip::after { background: #fff; color: #202124; border: 1px solid #dadce0; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px rgba(60, 64, 67, 0.15); } /* ============ 모달 오버레이 ============ */ html[data-theme="sheets"] .modal-overlay { background: rgba(32, 33, 36, 0.55); } /* ============ 스크롤바 ============ */ html[data-theme="sheets"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-theme="sheets"] ::-webkit-scrollbar-track { background: #f1f3f4; } html[data-theme="sheets"] ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 6px; border: 3px solid #f1f3f4; } html[data-theme="sheets"] ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* ============ 모바일 ============ */ @media (max-width: 680px) { html[data-theme="sheets"] body { padding-left: 0.75rem; padding-bottom: 2rem; } html[data-theme="sheets"] .sheet-rowheader { display: none; } /* 좁은 화면에서는 하단 탭 줄/공유 버튼까지 넣으면 실제 콘텐츠(특히 인벤토리 선택바)와 겹치는 자리 다툼이 커져서, 시트 느낌에 크게 안 보태는 이 둘은 아예 뺀다. */ html[data-theme="sheets"] .sheet-tabs, html[data-theme="sheets"] .sheet-share-btn { display: none; } html[data-theme="sheets"] .inventory-selection-bar { bottom: 1.25rem; } /* 메뉴 항목(파일/수정/보기...)까지 넣으면 좁은 화면에서 문서 제목이 거의 안 보일 정도로 짓눌려서, 시트 느낌에 크게 안 보태는 이 줄은 아예 뺀다. */ html[data-theme="sheets"] .sheet-menu-items { display: none; } /* 툴바 아이콘도 다 못 들어가지만, 세로로 접히면(위 메뉴바처럼) 고정 높이를 넘어서 아래 콘텐츠와 겹치므로 줄바꿈 대신 가로 스크롤로 흘려보낸다. */ html[data-theme="sheets"] .sheet-toolbar { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* main.css 모바일 규칙은 .nav를 position:sticky로 화면에 붙여두는데, 시트 테마의 고정 상단 크롬(top:126px 자리)과 body의 overflow-x:hidden(양쪽 축이 스크롤 컨테이너가 되면서 sticky 기준점 계산이 어긋남)이 겹치면 nav가 자기 자리보다 한참 아래로 밀려 렌더링되면서 밑에 있는 패널 상단을 그대로 덮어버리는 문제가 있었다("메뉴 때문에 화면이 가려짐"). sticky를 포기하고 일반 흐름에 놓으면 이 어긋남 자체가 발생하지 않는다 - 스크롤 중 계속 붙어있는 편의 기능만 빠지고, 가려짐 버그는 원천적으로 없어진다. */ html[data-theme="sheets"] .nav { position: static; top: auto; } }