/* 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, html[data-theme="sheets"] .attr-row { 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"] .attr-value .bonus, html[data-theme="sheets"] .item-card-meta .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; } html[data-theme="sheets"] .nav { top: 126px; } }