/* ---------------------------------------------------------------- 불러오는 그림 (js/ui/loader.js) — 검은 화면 대신 도는 지구와 배 */ #boot-loader { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(ellipse 60% 70% at 50% 46%, #1b2433 0%, #111720 55%, #090c12 100%); } #boot-loader.on, #boot-loader.out { display: flex; } #boot-loader.on { opacity: 1; pointer-events: auto; } #boot-loader.dim { background: rgba(6,8,12,.72); } /* 장면 사이: 뒤 화면이 조금 비치게 */ #boot-loader .bl-box { display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateY(-2vh); } #boot-loader .bl-img { width: min(42vh, 360px); height: min(42vh, 360px); object-fit: contain; image-rendering: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); } #boot-loader.dim .bl-img { width: min(30vh, 260px); height: min(30vh, 260px); } #boot-loader .bl-text { font-family: 'Nanum Myeongjo', 'Batang', serif; font-size: clamp(14px, 2.2vh, 20px); letter-spacing: .14em; color: #e9dcbc; text-shadow: 0 2px 8px #000; min-height: 1.4em; } #boot-loader .bl-dots { display: flex; gap: 7px; } #boot-loader .bl-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c9a868; opacity: .25; animation: bl-dot 1.2s infinite ease-in-out; } #boot-loader .bl-dots i:nth-child(2) { animation-delay: .2s; } #boot-loader .bl-dots i:nth-child(3) { animation-delay: .4s; } @keyframes bl-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { #boot-loader .bl-dots i { animation: none; opacity: .7; } } #boot-loader .bl-count { font-size: clamp(11px, 1.6vh, 14px); letter-spacing: .08em; color: rgba(233,220,188,.55); min-height: 1.3em; } /* 처음 열 때 받은 파일 수 */ /* Loop of Good Hope — theme: dark wood, brass trim, parchment, Myeongjo serif */ :root { --wood-950: #120c08; --wood-900: #1a120c; --wood-800: #231810; --wood-700: #2e2016; --wood-600: #3b2a1c; --wood-500: #4d3825; --brass: #b8925a; --brass-hi: #e3c68d; --brass-dk: #7a5c33; --brass-deep: #57401f; --parch: #ebdfc3; --parch-2: #e0d0ac; --parch-3: #cfba8e; --parch-dk: #b59f72; --ink: #2a1f16; --ink-2: #4a3b2c; --ink-soft: #6e5c46; --cream: #f2e7cc; --cream-2: #d9c9a6; --cream-dim: #a8977a; --navy: #1e3552; --navy-2: #2a4a70; --navy-hi: #3d679a; --red: #74271f; --red-hi: #9b3a2c; --green: #3b6a3e; --green-hi: #4f8a52; --gold: #d9b45f; --warn: #b04a2f; --shadow: 0 6px 24px rgba(0,0,0,.55); --serif: 'Nanum Myeongjo', 'Noto Serif KR', 'Batang', '바탕', 'AppleMyungjo', serif; --latin: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; } * { box-sizing: border-box; } svg.ic { width: 1.1em; height: 1.1em; flex: 0 0 auto; vertical-align: -0.15em; } .win .title svg.ic { width: 24px; height: 24px; color: var(--brass-hi); } html, body { margin: 0; height: 100%; background: #07050a; overflow: hidden; } body { font-family: var(--serif); font-weight: var(--body-weight, 400); color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; user-select: none; } #stage { position: fixed; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; background: #0b0806; } /* ↑ fixed: 휴대폰 브라우저가 1600px 무대를 보고 화면(레이아웃 뷰포트)을 넓혀 일부만 보여 주던 것을 막는다 (UI QA 2026-10-11 #1) */ #stage > canvas { position: absolute; left: 0; top: 0; } #world { width: 1600px; height: 900px; } #overlay { width: 1600px; height: 900px; pointer-events: none; } #scene { width: 1600px; height: 900px; } .layer { position: absolute; inset: 0; } #ui { position: absolute; inset: 0; pointer-events: none; } #ui > * { pointer-events: auto; } .hidden { display: none !important; } /* ---------------------------------------------------------------- textures */ .wood { background: repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,.035) 2px 5px, rgba(255,255,255,.01) 5px 9px), linear-gradient(180deg, #332418 0%, #24190f 55%, #1b130c 100%); border: 1px solid #0c0806; box-shadow: inset 0 0 0 1px rgba(227,198,141,.18), inset 0 1px 0 rgba(255,235,190,.08), var(--shadow); } .brass-frame { position: relative; } .brass-frame::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(184,146,90,.55); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); } .parch { color: var(--ink); background: radial-gradient(120% 90% at 50% 40%, rgba(255,250,235,.55) 0%, rgba(255,250,235,0) 60%), radial-gradient(90% 70% at 10% 100%, rgba(150,110,60,.18) 0%, rgba(0,0,0,0) 60%), radial-gradient(80% 60% at 100% 0%, rgba(150,110,60,.15) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, #eee3c9, #e2d2af); box-shadow: inset 0 0 40px rgba(120,85,40,.28), inset 0 0 0 1px rgba(120,90,50,.35); } .parch.grain { background-blend-mode: normal; } .ornament-corners { position: relative; } .ornament-corners::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--brass), var(--brass)) top left / 16px 2px no-repeat, linear-gradient(var(--brass), var(--brass)) top left / 2px 16px no-repeat, linear-gradient(var(--brass), var(--brass)) top right / 16px 2px no-repeat, linear-gradient(var(--brass), var(--brass)) top right / 2px 16px no-repeat, linear-gradient(var(--brass), var(--brass)) bottom left / 16px 2px no-repeat, linear-gradient(var(--brass), var(--brass)) bottom left / 2px 16px no-repeat, linear-gradient(var(--brass), var(--brass)) bottom right / 16px 2px no-repeat, linear-gradient(var(--brass), var(--brass)) bottom right / 2px 16px no-repeat; } /* ---------------------------------------------------------------- HUD */ .hud { position: absolute; left: 0; top: 0; right: 0; height: 54px; display: flex; align-items: center; gap: 0; padding: 0 14px 0 8px; z-index: 20; } .hud .emb { width: 46px; height: 46px; flex: 0 0 46px; margin-right: 8px; } .hud .cell { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 34px; font-size: 19px; color: var(--cream); white-space: nowrap; letter-spacing: .02em; } .hud .cell + .cell { border-left: 1px solid rgba(184,146,90,.35); } .hud .cell svg { width: 22px; height: 22px; flex: 0 0 22px; } .hud .cell small { color: var(--cream-dim); font-size: 14px; margin-left: 2px; } .hud .grow { flex: 1; } .hud .val-warn { color: #ff9f7a; } /* ---------------------------------------------------------------- buttons */ .btn { font-family: var(--serif); font-size: 19px; color: var(--cream); cursor: pointer; letter-spacing: .04em; padding: 10px 22px; min-height: 46px; border-radius: 3px; position: relative; background: linear-gradient(180deg, #3e2d1e, #251910); border: 1px solid #6b5230; box-shadow: inset 0 0 0 1px rgba(227,198,141,.25), inset 0 1px 0 rgba(255,240,200,.12), 0 2px 6px rgba(0,0,0,.45); display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: filter .12s, transform .06s; } .btn:hover { filter: brightness(1.18); box-shadow: inset 0 0 0 1px rgba(227,198,141,.55), 0 0 14px rgba(227,198,141,.25), 0 2px 6px rgba(0,0,0,.45); } .btn:active { transform: translateY(1px); } .btn.navy { background: linear-gradient(180deg, #2c4a6e, #182c45); border-color: #7d6a45; } .btn.red { background: linear-gradient(180deg, #7e2d24, #4c1812); border-color: #7d6a45; } .btn.green { background: linear-gradient(180deg, #43704a, #274529); border-color: #7d6a45; } .btn.ghost { background: rgba(0,0,0,.25); } .btn.small { font-size: 16px; min-height: 34px; padding: 5px 14px; } .btn[disabled], .btn.disabled { opacity: .42; pointer-events: none; filter: grayscale(.5); } .btn svg { width: 22px; height: 22px; } /* ---------------------------------------------------------------- command menu (right side plaques) */ .cmdmenu { position: absolute; right: 26px; top: 84px; width: 300px; padding: 16px 14px 14px; z-index: 15; } .cmdmenu h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: var(--brass-hi); text-align: center; letter-spacing: .08em; } .cmdmenu h3 small { display: block; font-size: 14px; color: var(--cream-dim); letter-spacing: .02em; margin-top: 3px; font-weight: 400; } .cmdmenu .items { display: flex; flex-direction: column; gap: 7px; } .cmd { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; font-size: 19px; color: var(--cream); background: linear-gradient(180deg, rgba(62,45,30,.95), rgba(34,24,16,.95)); border: 1px solid #5a4428; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(227,198,141,.14); } .cmd:hover { border-color: var(--brass); box-shadow: inset 0 0 0 1px rgba(227,198,141,.4), 0 0 12px rgba(227,198,141,.18); color: #fff6de; } .cmd.kbd-focus { border-color: #f0cf7b; box-shadow: inset 0 0 0 2px rgba(240,207,123,.55), 0 0 16px rgba(240,207,123,.32); color: #fff8df; } .cmd svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--brass-hi); } .cmd .sub { margin-left: auto; font-size: 14px; color: var(--cream-dim); } .cmd.dim > * { opacity: .45; } /* 흐린 항목: 버튼 안 글·그림만 흐리게 — 튜토리얼 「여기」 표(::after)와 도움말 풍선은 또렷하게 */ .cmd.dim { border-color: #46351f; background: linear-gradient(180deg, rgba(46,34,23,.86), rgba(26,19,12,.86)); } .cmd.exit { margin-top: 6px; background: linear-gradient(180deg, rgba(40,52,70,.95), rgba(20,28,40,.95)); } /* ---------------------------------------------------------------- dialog box */ .dlg { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; width: 980px; min-height: 150px; z-index: 60; display: flex; gap: 0; cursor: pointer; } .dlg .pframe { width: 150px; flex: 0 0 150px; padding: 8px; } .dlg .pframe canvas { position: static; display: block; width: 134px; height: 134px; } .dlg .body { flex: 1; padding: 24px 34px 22px 30px; position: relative; font-size: 22px; line-height: 1.62; } /* 말을 모르는 인어공주의 몸짓 (G.Tale.mime) */ .dlg .body .mime { display: block; font-style: italic; } .dlg .body .mime-gist { display: block; margin-top: 6px; font-size: .78em; opacity: .62; } .dlg .name { position: absolute; left: 150px; top: -20px; padding: 5px 20px; font-size: 17px; color: var(--cream); letter-spacing: .06em; z-index: 2; } .dlg .more { position: absolute; right: 18px; bottom: 10px; font-size: 16px; color: var(--ink-soft); animation: blink 1.2s infinite; } @keyframes blink { 50% { opacity: .2; } } .dlg.noportrait .body { padding-left: 38px; } .dlg .ask-note { margin-top: 6px; font-size: 16px; color: #8a6a3e; } /* 질문의 셈 (금화·남은 날) — js/ui/ui.js UI.ask */ .dlg .auto-left { position: absolute; right: 18px; bottom: 8px; font-size: 14px; color: #7a5a2e; background: rgba(250,240,215,.85); padding: 1px 8px; border-radius: 4px; pointer-events: none; } /* 항해 중 사건: n초 뒤 저절로 — js/ui/ui.js autoTimer */ .dlg .askrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .dlg .askrow .btn { font-size: 18px; min-height: 40px; } /* 지난번에 고른 선택지 */ .dlg .askrow .btn.prevpick { box-shadow: 0 0 0 2px #e3c68d, 0 0 10px rgba(227,198,141,.6); } .dlg .askrow .btn .prevtag { margin-left: 8px; font-size: 12px; padding: 1px 6px; border-radius: 8px; background: rgba(227,198,141,.85); color: #3a2710; vertical-align: 2px; } .dlg .garble { color: var(--ink-soft); letter-spacing: .12em; } /* 두 인물이 마주 보는 대화. 기존 한 사람 대화창은 그대로 둔다. */ .dlg-stage { position: absolute; inset: 0; z-index: 60; pointer-events: none; } .dlg-stage > * { pointer-events: auto; } .dlg-stage .dlg.duo { width: 1060px; min-height: 164px; } .dlg-stage .dlg.duo .body { padding: 26px 42px 24px; } .dlg-stage .dlg.duo > .name { display: none; } .dlg-stage .dlg.duo .name { left: 24px; } .dlg-stage .dlg.duo.speaker-right .name { left: auto; right: 24px; } .dlg-stage .dlg.duo .interp { left: 24px; right: 24px; } /* 대화창 위에 서는 사람들 — UI(이름판·메뉴·HUD)보다 아래 층에 그린다. 자리·크기는 js/ui/ui.js dialogShell이 대화창을 재어 정한다 */ .dlg-actors { position: absolute; inset: 0; pointer-events: none; } #ui > .dlg-actors { z-index: 13; pointer-events: none; } .dlg-stage > .dlg-actors { z-index: 0; pointer-events: none !important; } /* 얼굴(흉상)로 설 때: 테두리·배경 없이 투명 배경 그림만 — 무릎상처럼 그림자만 깐다 */ .dlg-actor.bust .actor-art { filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); } .dlg-actor { position: absolute; left: 0; top: 0; width: 260px; height: 260px; filter: brightness(.7) saturate(.8); transform: translateY(8px) scale(.97); transform-origin: 50% 100%; transition: filter .22s, transform .22s; } /* 듣는 사람은 어둡게만 (반투명하면 뒤 배경이 비쳐 유령처럼 보인다) */ .talk-hidden { opacity: 0 !important; pointer-events: none !important; transition: opacity .18s !important; } .dlg-actor.active { filter: brightness(1.04) saturate(1.03); transform: translateY(0) scale(1); } .dlg-actor .portrait-rig { transform-origin: 50% 100%; } .dlg-actor .actor-art { position: absolute; inset: 0 0 24px; } /* 교역소: 먼 산지에서 들여와 파는 물건 (중계무역) */ .tbl .tag.relay { font-size: 12px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; background: #6a4a2a; color: #f3e2bd; border-radius: 6px; cursor: help; } /* 무릎상 대화: 두 사람이 머리부터 무릎까지 서서 마주 본다 (여급·항해사·후원자) */ .dlg-actor.tall .actor-art { inset: 0; } .dlg-actor.bust .actor-art { inset: 0; } .dlg-actor.tall .actor-art { filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)); } .dlg-stage > .actor-name { position: absolute; padding: 5px 20px; text-align: center; white-space: nowrap; color: var(--cream); font-size: 17px; letter-spacing: .06em; z-index: 61; } .dlg-stage .dlg.duo.solo > .name { display: block; left: 24px; } /* 대화 중에는 건물 안에 서 있던 여급 그림을 감춘다 (대화창 위에 선 사람과 겹치지 않게) */ .tavern-maid { transition: opacity .2s; } #ui.talking .tavern-maid { opacity: 0; pointer-events: none; } /* 한 장짜리 인물 그림을 머리·몸통·하체로 나눈 가벼운 2.5D 리그 */ .portrait-rig-host { position: relative; overflow: visible; } .portrait-rig { position: absolute; inset: 0; overflow: visible; transform-origin: 50% 100%; } .portrait-rig .rig-layer, .portrait-rig .rig-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; user-select: none; image-rendering: auto; } .portrait-rig .rig-base { opacity: 1; } /* 몸이 그림 끝에 닿아 잘린 무릎상: 잘린 쪽 끝을 흐려 팔이 칼로 자른 듯 끊겨 보이지 않게 (js/data/halfedge.js) */ .portrait-rig-half.cut-l { -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 4%, #000 12%); mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 4%, #000 12%); } .portrait-rig-half.cut-r { -webkit-mask-image: linear-gradient(to left, transparent 0, rgba(0,0,0,.35) 4%, #000 12%); mask-image: linear-gradient(to left, transparent 0, rgba(0,0,0,.35) 4%, #000 12%); } .portrait-rig-half.cut-l.cut-r { -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 4%, #000 12%, #000 88%, rgba(0,0,0,.35) 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 4%, #000 12%, #000 88%, rgba(0,0,0,.35) 96%, transparent 100%); } .portrait-rig .rig-piece { opacity: 0; } .portrait-rig.rig-ready .rig-base { opacity: 0; } .portrait-rig.rig-ready .rig-piece { opacity: 1; } .portrait-rig.rig-piece-failed .rig-base { opacity: 1; } .portrait-rig.rig-piece-failed .rig-piece { opacity: 0; } .portrait-rig-bust .rig-layer { object-position: 50% 100%; } /* 투명 배경 흉상은 아래 끝(어깨)이 대화창 윗변에 닿게 */ .portrait-rig .rig-lower { clip-path: inset(calc(var(--rig-chest) - 3%) 0 0 0); transform-origin: 50% 94%; } .portrait-rig .rig-torso { clip-path: inset(calc(var(--rig-neck) - 4%) 0 calc(100% - var(--rig-chest) - 4%) 0); transform-origin: 50% var(--rig-chest); } .portrait-rig .rig-head { clip-path: inset(0 0 calc(100% - var(--rig-neck) - 4%) 0); transform-origin: var(--rig-face-x) var(--rig-neck); } .portrait-rig .rig-facefx { position: absolute; inset: 0; pointer-events: none; opacity: .74; } .portrait-rig .rig-facefx.off { display: none; } .portrait-rig .rig-facefx i { position: absolute; display: block; pointer-events: none; } .portrait-rig .rig-facefx .eye { top: var(--rig-eye-y); width: 7%; height: 1.2%; border-top: 2px solid rgba(45,24,20,.72); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scaleY(.15); } .portrait-rig .rig-facefx .eye-l { left: calc(var(--rig-face-x) - var(--rig-eye-gap)); } .portrait-rig .rig-facefx .eye-r { left: calc(var(--rig-face-x) + var(--rig-eye-gap)); } .portrait-rig .rig-facefx .mouth { left: var(--rig-face-x); top: var(--rig-mouth-y); width: 8%; height: 1.4%; border-bottom: 2px solid rgba(80,33,35,.55); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); } .portrait-rig.is-blink .rig-facefx .eye { opacity: .95; } .portrait-rig .rig-torso { animation: rig-breathe 4.6s ease-in-out infinite; } .portrait-rig .rig-head { animation: rig-sway 6.8s ease-in-out infinite; } .portrait-rig.is-talk .rig-head { animation: rig-talk-head .72s ease-in-out infinite; } .portrait-rig.is-talk .rig-torso { animation-duration: 2.6s; } .portrait-rig.is-talk .rig-facefx .mouth { opacity: .5; animation: rig-mouth .28s ease-in-out infinite alternate; } .portrait-rig.is-listen .rig-head { animation: rig-listen 5.4s ease-in-out infinite; } .portrait-rig.is-react .rig-head { animation: rig-react .5s ease-out 1; } .portrait-rig.emotion-happy { filter: brightness(1.04) saturate(1.07); } .portrait-rig.emotion-warm { filter: sepia(.04) saturate(1.04); } .portrait-rig.emotion-shy { filter: sepia(.08) saturate(1.03); } .portrait-rig.emotion-surprised .rig-head { animation: rig-react .45s ease-out 1; } .portrait-rig.rig-single { animation: rig-card 5.8s ease-in-out infinite; } @keyframes rig-breathe { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(var(--rig-breath-y)) scaleY(var(--rig-breath-s)); } } @keyframes rig-sway { 0%,100% { transform: rotate(var(--rig-sway-b)) translateY(0); } 50% { transform: rotate(var(--rig-sway-a)) translateY(var(--rig-sway-y)); } } @keyframes rig-talk-head { 0%,100% { transform: rotate(var(--rig-talk-b)) translateY(0); } 50% { transform: rotate(var(--rig-talk-a)) translateY(var(--rig-talk-y)); } } @keyframes rig-mouth { from { transform: translate(-50%,-50%) rotate(var(--rig-mouth-rot, 0deg)) scaleY(.3); } to { transform: translate(-50%,-50%) rotate(var(--rig-mouth-rot, 0deg)) scaleY(1.35); } } @keyframes rig-listen { 0%,76%,100% { transform: rotate(0) translateY(0); } 82% { transform: rotate(.35deg) translateY(1px); } 89% { transform: rotate(-.12deg) translateY(0); } } @keyframes rig-react { 0% { transform: translateY(5px) rotate(-.8deg); } 55% { transform: translateY(-3px) rotate(.4deg); } 100% { transform: none; } } @keyframes rig-card { 0%,100% { transform: translateY(0) rotate(-.15deg); } 50% { transform: translateY(-2px) rotate(.18deg); } } /* 낯선 말 (js/ui/tongues.js): 알아듣지 못한 낱말은 그 고장 글자로, 알아들은 낱말은 한글로 도드라지게 */ .dlg .foreign { color: #6a5638; letter-spacing: .04em; font-family: 'Palatino Linotype', 'Segoe UI', 'Segoe UI Historic', 'Nirmala UI', 'Ebrima', 'Gadugi', 'Leelawadee UI', 'Yu Gothic', 'Meiryo', 'Noto Sans', serif; opacity: .9; } .dlg .foreign.ltrx { unicode-bidi: bidi-override; direction: ltr; } .dlg .foreign.arabic, .dlg .foreign.persian, .dlg .foreign.uyghur { font-family: 'Segoe UI', 'Tahoma', 'Noto Naskh Arabic', serif; } .dlg .foreign.hanzi, .dlg .foreign.idu { font-family: 'SimSun', 'MS Mincho', 'Noto Serif CJK KR', serif; letter-spacing: .02em; } .dlg .heard { color: #1f3b6b; font-weight: 700; } /* 통역 창: 대화창 아래 작게 */ .dlg .interp { position: absolute; left: 150px; right: 40px; top: calc(100% + 12px); display: flex; gap: 10px; align-items: flex-start; padding: 8px 16px 10px 10px; font-size: 17px; line-height: 1.5; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); } .dlg.noportrait .interp { left: 24px; } .dlg .interp .ipf canvas { position: static; display: block; width: 56px; height: 56px; border-radius: 4px; border: 2px solid rgba(90,60,30,.6); } .dlg .interp .itext { flex: 1; color: var(--ink); } .dlg .interp .iname { font-size: 14px; color: var(--brass-deep, #7a5a26); letter-spacing: .06em; margin-bottom: 2px; } .dlg .interp .iname small { color: var(--ink-soft); letter-spacing: 0; } .dlg .interp .ivia { color: var(--ink-soft); font-style: italic; } /* 통역관이 남에게 물어 옮길 때의 말머리 */ .dlg .interp .caught { color: #1f3b6b; font-weight: 700; border-bottom: 2px solid rgba(31,59,107,.55); } .dlg .interp .lost { color: var(--ink-soft); letter-spacing: .1em; } /* ---------------------------------------------------------------- modal / choose */ .modal-back { position: absolute; inset: 0; background: rgba(5,3,2,.45); z-index: 70; display: flex; align-items: center; justify-content: center; pointer-events: auto; } .modal-back.clear { background: transparent; pointer-events: none; } .modal-back.clear > * { pointer-events: auto; } .modal-back.clear.catch { pointer-events: auto; cursor: pointer; } /* 대화 중에는 화면 어디를 눌러도 다음으로 (아래 장면에 클릭이 새지 않게) */ .win { min-width: 380px; max-width: 1400px; max-height: 820px; display: flex; flex-direction: column; } .win .title { padding: 12px 22px; font-size: 22px; color: var(--brass-hi); letter-spacing: .06em; display: flex; align-items: center; gap: 10px; } .win .title .x { margin-left: auto; cursor: pointer; font-size: 22px; color: var(--cream-dim); padding: 0 6px; } .win .title .x:hover { color: #fff; } .win .content { padding: 18px 22px 20px; overflow: auto; } .win .content.parch { margin: 0 10px 10px; } .win .foot { padding: 0 20px 18px; display: flex; gap: 12px; justify-content: flex-end; } .choices { display: flex; flex-direction: column; gap: 8px; } .choice { padding: 11px 18px; font-size: 20px; cursor: pointer; color: var(--ink); border: 1px solid rgba(110,80,40,.35); background: linear-gradient(180deg, rgba(255,250,236,.55), rgba(230,214,180,.55)); display: flex; align-items: center; gap: 12px; } .choice:hover { background: linear-gradient(180deg, #fff6e0, #efdfbc); border-color: var(--brass-dk); } .choice.kbd-focus, .btn.kbd-focus, .opt.kbd-focus, .tab.kbd-focus { outline: 3px solid #c99a3c; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255,244,205,.75); } .choice .r { margin-left: auto; color: var(--ink-soft); font-size: 16px; } .choice.dis { opacity: .45; pointer-events: none; } .choice svg { width: 22px; height: 22px; color: var(--brass-deep); } /* 제독 만들기: 생김새 이름 */ .create .look-name { margin-top: 6px; font-size: 16px; color: var(--ink); line-height: 1.35; } .create .look-name small { display: block; font-size: 13px; } /* 아이콘 자리에 그림 (G.icon({src})) — 알림·바다 소식의 얼굴·물건 */ img.ic.ic-pic { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: radial-gradient(circle, rgba(255,248,224,.9), rgba(180,143,87,.35)); flex: 0 0 auto; } .toast img.ic.ic-pic { width: 44px; height: 44px; flex: 0 0 44px; } /* 대화 단추·알림·글 속의 작은 물건 그림 */ .askrow .btn .ask-thumb { width: 30px; height: 30px; margin: -6px 2px -6px -6px; object-fit: contain; border-radius: 5px; background: radial-gradient(circle, rgba(255,248,224,.85), rgba(180,143,87,.3)); } .toast .toast-pic { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; border-radius: 6px; background: radial-gradient(circle, rgba(255,248,224,.9), rgba(180,143,87,.35)); } #ui.at-sea .toast .toast-pic { width: 28px; height: 28px; flex: 0 0 28px; } img.inline-ic { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; margin: -4px 4px -4px 0; border-radius: 5px; background: radial-gradient(circle, rgba(255,248,224,.85), rgba(180,143,87,.3)); } .item-show { display: flex; gap: 16px; align-items: center; } .item-show img { width: 128px; height: 128px; flex: 0 0 128px; object-fit: contain; border-radius: 8px; background: radial-gradient(circle, #f6ead0, #b99560); box-shadow: inset 0 0 0 1px rgba(91,61,27,.35); } .choice-thumb { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; border-radius: 6px; background: radial-gradient(circle, rgba(255,248,224,.92), rgba(180,143,87,.38)); box-shadow: inset 0 0 0 1px rgba(91,61,27,.3); } .keybind-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 7px 12px; } .keybind-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 7px; border: 1px solid rgba(96,68,32,.2); background: rgba(255,248,225,.28); } .keybind-row > span { min-width: 0; flex: 1; } .keybind-row b { display: block; font-size: 16px; } .keybind-row small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--ink-soft); } .keybind-btn { min-width: 106px; white-space: nowrap; } /* ---------------------------------------------------------------- tables */ table.tbl { width: 100%; border-collapse: collapse; font-size: 18px; color: var(--ink); } table.tbl th { text-align: left; font-weight: 700; font-size: 15px; color: var(--ink-soft); padding: 6px 10px; border-bottom: 1px solid rgba(90,65,35,.45); letter-spacing: .04em; } table.tbl td { padding: 7px 10px; border-bottom: 1px solid rgba(90,65,35,.18); vertical-align: middle; } table.tbl tr.sel td { background: rgba(160,120,60,.18); } table.tbl tr.click { cursor: pointer; } table.tbl tr.click:hover td { background: rgba(160,120,60,.12); } table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } table.tbl .up { color: #8a2a1e; } table.tbl .down { color: #2e6a36; } .muted { color: var(--ink-soft); } .cream-muted { color: var(--cream-dim); } /* ---------------------------------------------------------------- bars */ .bar { height: 9px; background: #cbbd9c; border-radius: 1px; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); overflow: hidden; } .bar > i { display: block; height: 100%; background: linear-gradient(180deg, #3a5f8c, #22405f); } .bar.red > i { background: linear-gradient(180deg, #a9463a, #6e2a22); } .bar.green > i { background: linear-gradient(180deg, #5b9a5d, #336a38); } .bar.gold > i { background: linear-gradient(180deg, #d6b066, #9a7431); } .bar.dark { background: rgba(0,0,0,.45); } /* ---------------------------------------------------------------- toasts */ .toasts { position: absolute; left: 50%; transform: translateX(-50%); top: 66px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 90; pointer-events: none; } /* 교역 순이익: 제독에게 쏟아지는 금화. 작은 이익은 한두 닢, 큰 이익은 금빛 소나기. */ .trade-profit-fx { position: absolute; inset: 0; z-index: 96; overflow: hidden; pointer-events: none !important; perspective: 900px; } .trade-profit-fx::before { content: ''; position: absolute; inset: 8% 27% 3%; opacity: 0; background: radial-gradient(ellipse at 50% 64%, rgba(255,211,90,.28), rgba(255,174,45,.08) 38%, transparent 70%); animation: trade-profit-glow 1.8s ease-out both; } .trade-profit-fx.heavy::before { opacity: 1; animation-duration: 3.8s; } .trade-profit-hero { position: absolute; z-index: 2; left: 50%; bottom: 18px; height: var(--hero-h, 470px); max-width: 44%; object-fit: contain; object-position: 50% 100%; transform: translateX(-50%); filter: drop-shadow(0 12px 16px rgba(0,0,0,.48)); animation: trade-profit-hero-in .34s ease-out both, trade-profit-hero-bob .42s .48s ease-in-out 2; } .trade-profit-coin { position: absolute; z-index: 3; top: 0; left: 0; width: var(--size); height: var(--size); opacity: 0; transform-origin: 50% 50%; will-change: transform,opacity; } .trade-profit-coin img { display: block; width: 100%; height: 100%; object-fit: contain; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 5px 4px rgba(34,17,3,.5)); } .trade-profit-fx.heavy .trade-profit-coin img { filter: drop-shadow(0 3px 3px rgba(34,17,3,.42)); } @keyframes trade-profit-hero-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes trade-profit-hero-bob { 0%,100% { margin-bottom: 0; } 45% { margin-bottom: -8px; } } @keyframes trade-profit-glow { 0% { opacity: 0; transform: scale(.72); } 25% { opacity: .85; } 100% { opacity: 0; transform: scale(1.15); } } .toast { min-width: 280px; max-width: 520px; padding: 11px 18px 11px 14px; font-size: 18px; display: flex; gap: 12px; align-items: center; animation: tin .35s ease-out; } .toast svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--brass-hi); } .toast.out { animation: tout .5s ease-in forwards; } @keyframes tin { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes tout { to { opacity: 0; transform: translateY(-14px); } } /* ---------------------------------------------------------------- title screen */ /* 타이틀(오프닝): 그림 위에 귀족적인 글꼴 — 라틴 Cinzel Decorative, 한글 송명(Song Myung). 둘 다 SIL Open Font License(상업적 이용 무료) */ .title-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 10; --title-latin: 'Cinzel Decorative', 'Cinzel', 'Times New Roman', serif; --title-ko: 'Song Myung', 'Nanum Myeongjo', 'Batang', serif; background: radial-gradient(ellipse 46% 30% at 50% 21%, rgba(8,12,26,.42), rgba(8,12,26,0) 70%), radial-gradient(ellipse 30% 34% at 50% 88%, rgba(10,6,2,.55), rgba(10,6,2,0) 72%), linear-gradient(180deg, rgba(6,10,22,.18), rgba(6,10,22,0) 34%, rgba(6,10,22,0) 70%, rgba(6,8,14,.42)); } .title-logo { margin-top: 92px; text-align: center; } .title-logo .latin { font-family: var(--title-latin); font-size: 84px; font-weight: 900; letter-spacing: .04em; line-height: 1.02; color: #f7e6b4; background: linear-gradient(180deg, #fff6d6 0%, #f3d98e 46%, #c9963e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #3a2508) drop-shadow(0 0 18px rgba(255,214,140,.38)) drop-shadow(0 8px 18px rgba(0,0,0,.75)); } .title-logo .ko { font-family: var(--title-ko); font-size: 38px; letter-spacing: .42em; padding-left: .42em; color: #fbefd0; margin-top: 4px; font-weight: 400; text-shadow: 0 0 2px #1a0f06, 0 2px 10px rgba(0,0,0,.95), 0 0 28px rgba(40,20,6,.85); } .title-logo .rule { width: 560px; height: 2px; margin: 16px auto 4px; background: linear-gradient(90deg, transparent, #f0d48a 30%, #fff3cc 50%, #f0d48a 70%, transparent); box-shadow: 0 0 10px rgba(255,220,150,.55); } .title-menu { margin-top: auto; margin-bottom: 86px; display: flex; flex-direction: column; gap: 12px; width: 340px; } /* 메뉴는 아래로 — 가운데의 배·해돋이가 보이게 */ .title-menu .btn { font-family: var(--title-ko); font-size: 23px; letter-spacing: .08em; min-height: 54px; box-shadow: 0 6px 18px rgba(0,0,0,.5); } .title-menu .btn.disabled { opacity: 1; filter: saturate(.35) brightness(.72); color: rgba(240,228,200,.62); } .title-bottom { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; } .title-foot { text-align: center; font-family: var(--title-ko); font-size: 17px; color: rgba(248,236,206,.82); letter-spacing: .18em; text-shadow: 0 1px 6px rgba(0,0,0,.9); } .title-version { font-family: var(--title-latin); font-size: 13px; line-height: 1; color: rgba(248,236,206,.66); letter-spacing: .16em; text-shadow: 0 1px 5px rgba(0,0,0,.95); } .title-beta-center { pointer-events: auto; margin-top: 3px; padding: 3px 9px; border: 1px solid rgba(240,212,138,.48); color: #f0d48a; font-family: var(--title-ko); font-size: 13px; letter-spacing: .08em; text-decoration: none; background: rgba(15,24,28,.64); } .title-beta-center:hover, .title-beta-center:focus-visible { border-color: #f0d48a; color: #fff3cc; } .loading { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 18px; color: var(--cream-2); letter-spacing: .1em; text-shadow: 0 2px 8px rgba(0,0,0,.95); pointer-events: none; opacity: 1; transition: opacity .32s ease, visibility .32s; } .loading img { width: 210px; height: 210px; object-fit: contain; margin-bottom: -12px; filter: drop-shadow(0 8px 15px rgba(0,0,0,.62)); } .loading span { padding: 5px 13px 6px; border-radius: 14px; background: rgba(8,13,19,.48); box-shadow: inset 0 0 0 1px rgba(226,194,119,.16); } .loading.done { opacity: 0; visibility: hidden; } /* ---------------------------------------------------------------- character creation */ .create { position: absolute; left: 60px; top: 70px; width: 1480px; height: 780px; display: flex; gap: 22px; z-index: 12; } .create .col { display: flex; flex-direction: column; gap: 14px; } .create .sect { padding: 16px 20px; } .create h4 { margin: 0 0 10px; font-size: 20px; color: var(--ink); letter-spacing: .06em; border-bottom: 1px solid rgba(90,65,35,.35); padding-bottom: 6px; } .create label { font-size: 16px; color: var(--ink-soft); } .create input[type=text], .create select, .nfield { font-family: var(--serif); font-size: 20px; color: var(--ink); background: rgba(255,252,242,.7); border: 1px solid rgba(110,80,40,.5); padding: 7px 10px; border-radius: 2px; outline: none; } .create input[type=text]:focus { border-color: var(--brass-dk); background: #fffaf0; } .opt-row { display: flex; gap: 8px; flex-wrap: wrap; } .opt { padding: 8px 14px; font-size: 18px; cursor: pointer; border: 1px solid rgba(110,80,40,.4); background: rgba(255,250,236,.45); color: var(--ink); } .opt.on { background: linear-gradient(180deg, #2c4a6e, #1b2f48); color: var(--cream); border-color: var(--brass-dk); } .opt:hover:not(.on) { background: rgba(255,250,236,.85); } .statrow { display: grid; grid-template-columns: 90px 1fr 50px; align-items: center; gap: 10px; font-size: 18px; margin: 5px 0; } .skillgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; } .skillrow { display: grid; grid-template-columns: 96px 1fr 34px 34px; gap: 6px; align-items: center; font-size: 17px; } .pips { display: flex; gap: 4px; } .pips i { width: 14px; height: 14px; border: 1px solid rgba(90,65,35,.55); transform: rotate(45deg) scale(.8); background: rgba(255,255,255,.3); } .pips i.on { background: linear-gradient(135deg, #3d679a, #1e3552); border-color: #1e3552; } .pips i.base { background: linear-gradient(135deg, #b8925a, #7a5c33); border-color: #7a5c33; } .mini { width: 30px; height: 28px; font-size: 16px; padding: 0; min-height: 0; } /* ---------------------------------------------------------------- city screen */ .city-banner { position: absolute; left: 22px; top: 72px; padding: 12px 22px; z-index: 14; min-width: 330px; } .city-banner .nm { font-size: 30px; font-weight: 800; color: var(--cream); letter-spacing: .08em; } .cv-legend .lg.own { display: inline-block; width: 16px; height: 4px; margin-right: 4px; vertical-align: 3px; background: linear-gradient(90deg, #b8322a 0 33%, #2a4ab0 33% 66%, #a01818 66%); border: 1px solid rgba(20,14,8,.7); } .city-banner .own-flag { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border: 1px solid rgba(0,0,0,.55); vertical-align: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.4); } .city-banner .meta { font-size: 15px; color: var(--cream-dim); margin-top: 4px; letter-spacing: .03em; } .caption { position: absolute; right: 26px; bottom: 16px; font-size: 16px; color: rgba(242,231,204,.72); letter-spacing: .06em; z-index: 13; text-shadow: 0 1px 4px #000; } /* ---------------------------------------------------------------- sailing HUD extras */ .minimap { position: absolute; left: 18px; bottom: 18px; width: 300px; height: 210px; z-index: 18; padding: 8px; cursor: pointer; } .minimap canvas { position: static !important; width: 284px; height: 194px; display: block; } .minimap .lbl { position: absolute; left: 16px; top: 10px; font-size: 15px; color: var(--ink); z-index: 2; letter-spacing: .05em; } .windbox { position: absolute; right: 18px; bottom: 18px; width: 270px; height: 150px; z-index: 18; display: flex; gap: 10px; padding: 10px 12px; } .windbox canvas { position: static !important; } .sailbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 18; display: flex; gap: 8px; padding: 8px 10px; width: calc(100% - 20px); box-sizing: border-box; } .sailbar .btn { min-height: 44px; padding: 6px 14px; font-size: 17px; } /* 입항 단추는 너비가 늘 같다 — 항구 이름이 길면 말줄임 (하단 메뉴가 커졌다 작아졌다 하며 단추가 밀리지 않게, 2026-10-25) */ .sailbar .btn.portbtn { flex: 0 0 214px; width: 214px; min-width: 214px; max-width: 214px; box-sizing: border-box; text-align: center; } .sailbar .btn.portbtn .pn { display: inline-block; max-width: 158px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .speedctl { display: flex; gap: 4px; align-items: center; padding: 0 6px; } .speedctl .opt { padding: 6px 10px; font-size: 15px; background: rgba(0,0,0,.3); color: var(--cream); border-color: #5a4428; } .speedctl .opt.on { background: linear-gradient(180deg, #2c4a6e, #1b2f48); } .status-strip { position: absolute; left: 18px; top: 66px; z-index: 17; padding: 8px 14px; font-size: 16px; color: var(--cream-2); max-width: 520px; } .coord { font-size: 15px; color: var(--cream-dim); } /* ---------------------------------------------------------------- misc */ .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 18px; } .kv > div:nth-child(odd) { color: var(--ink-soft); } .tag { display: inline-block; padding: 1px 8px; font-size: 14px; border: 1px solid rgba(110,80,40,.45); color: var(--ink-2); margin: 1px 3px 1px 0; background: rgba(255,250,236,.4); } .tag.dark { background: rgba(0,0,0,.3); color: var(--cream-2); border-color: #5a4428; } .sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(90,65,35,.45), transparent); margin: 12px 0; } .sep.brass { background: linear-gradient(90deg, transparent, var(--brass), transparent); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .flex { display: flex; gap: 10px; align-items: center; } .flex.col { flex-direction: column; align-items: stretch; } .right { margin-left: auto; } .big { font-size: 24px; } .center { text-align: center; } input[type=range] { accent-color: #2a4a70; width: 100%; } .scroll { overflow: auto; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(122,92,51,.6); border-radius: 5px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,.08); } .fade-black { position: absolute; inset: 0; background: #000; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .28s; } .fade-black.on { opacity: 1; } .cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .card { padding: 12px; border: 1px solid rgba(110,80,40,.35); background: rgba(255,250,236,.4); cursor: pointer; } .card:hover { background: rgba(255,250,236,.8); } .card.off { opacity: .45; } .big-num { font-size: 26px; font-weight: 700; } .warn-text { color: #8a2a1e; } .good-text { color: #2e6a36; } /* ---------------------------------------------------------------- city extras */ .infobar { position: absolute; left: 18px; bottom: 16px; display: flex; gap: 6px; padding: 8px 10px; z-index: 15; } .infobar .btn { font-size: 15px; min-height: 36px; padding: 4px 11px; gap: 6px; } .infobar .btn svg { width: 18px; height: 18px; } .sailbar .bar-settings, .infobar .bar-settings { margin-left: 10px; } /* 하단 메뉴 맨 오른쪽의 「설정」 (js/ui/info.js I.settingsButton) */ /* 수첩 옆 「마우스 따라가기」 켬/끔 (G.Ctrl.paintButton) */ .sailbar .btn.follow .tog { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 13px; background: rgba(0,0,0,.28); color: #cdbb98; } .sailbar .btn.follow.on { box-shadow: inset 0 0 0 2px #e8c35a, 0 0 10px rgba(232,195,90,.55); } .sailbar .btn.follow.on .tog { background: #e8c35a; color: #2a1a08; font-weight: 700; } .bld-plaque .nm { font-size: 28px; } .disc-card { display: flex; flex-direction: column; gap: 12px; } .disc-card canvas, .disc-card .disc-build-gif { width: 100%; height: auto; border: 2px solid #7a5c33; box-shadow: 0 0 0 1px #2a1f16; display: block; } .disc-card .disc-build-gif { aspect-ratio: 9 / 4; object-fit: cover; background: #f2e7cd; } .disc-card .dname { font-size: 34px; font-weight: 800; text-align: center; letter-spacing: .06em; color: var(--ink); } .disc-card .desc { font-size: 19px; line-height: 1.7; } .landmark-card .lm-art { display: flex; justify-content: center; align-items: flex-end; min-height: 160px; padding: 14px 10px 0; background: linear-gradient(180deg, #cfdde3 0%, #efe5cc 72%, #d9c7a0 100%); border: 2px solid #7a5c33; box-shadow: 0 0 0 1px #2a1f16; } .landmark-card .lm-art img { display: block; max-width: 100%; max-height: 300px; filter: drop-shadow(0 6px 8px rgba(40,26,12,.35)); } .landmark-card .lm-note { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink-soft); padding: 8px 12px; background: rgba(120,90,50,.08); border-left: 3px solid #8a6a3a; } .landmark-card .lm-note .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; } /* 실제 자료 (UNESCO·위키백과·GBIF·OBIS·박물관) */ .disc-card .real-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .disc-card .real-tags .tag.whc { background: #1d4f7a; color: #f3ead6; border-color: #10324f; } .disc-card .real-record, .disc-card .real-lore { font-size: 16px; line-height: 1.65; padding: 8px 12px; background: rgba(120,90,50,.08); border-left: 3px solid #8a6a3a; } .disc-card .real-record b { color: #1d4f7a; margin-right: 6px; } .disc-card .real-obj { font-size: 14px; text-align: center; color: var(--ink-soft); } .real-credit { font-size: 12px; line-height: 1.5; color: var(--ink-soft); text-align: center; opacity: .85; } .real-credit a, .disc-card .real-obj a { color: inherit; text-decoration: underline dotted; } .relic-strip .rs-item .rs-museum { font-size: 11px; opacity: .8; } .disc-head { text-align: center; font-family: var(--latin); letter-spacing: .3em; color: var(--brass-deep); font-size: 18px; } .tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 10px 8px; } .tabs .tab { padding: 7px 14px; font-size: 16px; cursor: pointer; color: var(--cream-2); border: 1px solid #5a4428; background: rgba(0,0,0,.25); } .tabs .tab.on { color: var(--ink); background: linear-gradient(180deg, #efe3c8, #dccaa2); border-color: var(--brass); } .goodico { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 -2px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(60,40,20,.5); } .goodico.pic { width: 30px; height: 30px; margin-right: 8px; vertical-align: middle; border-radius: 5px; background: radial-gradient(circle, rgba(255,248,224,.9), rgba(196,166,113,.45)); box-shadow: inset 0 0 0 1px rgba(91,61,27,.32); } .goodico.pic img { display: block; width: 100%; height: 100%; object-fit: contain; } .qty { width: 90px; text-align: right; } .shipcard { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 10px; border: 1px solid rgba(110,80,40,.35); background: rgba(255,250,236,.35); margin-bottom: 8px; } .shipcard canvas { width: 220px; height: 120px; display: block; } .shipcard.sel { background: rgba(160,120,60,.2); border-color: var(--brass-dk); } .shipcard.click:hover { background: rgba(255,244,214,.6); border-color: var(--brass-dk); } .shipcard.locked { opacity: .62; filter: grayscale(.35); } .traits { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 4px 0 2px; } .trait { display: inline-block; padding: 1px 8px; font-size: 14px; line-height: 1.5; border-radius: 3px; background: rgba(90,58,30,.14); border: 1px solid rgba(110,80,40,.4); color: #4a2e16; cursor: help; } .trait.lvchip { background: rgba(31,59,91,.12); border-color: rgba(31,59,91,.45); color: #1f3b5b; font-weight: 600; cursor: default; } .traits .cult { font-size: 14px; color: #7a6048; margin-left: 4px; } .woodnote { padding: 8px 12px; margin-bottom: 8px; border-left: 3px solid var(--brass-dk); background: rgba(160,120,60,.12); font-size: 16px; line-height: 1.6; } .woodnote .small { font-size: 14px; } table.tbl tr.sub td { padding-top: 0; } table.tbl tr:has(+ tr.sub) td { border-bottom: none; padding-bottom: 2px; } .hint-item { padding: 10px 12px; border-bottom: 1px solid rgba(90,65,35,.2); } .hint-item .nm { font-weight: 700; font-size: 19px; } .hint-item .tx { font-size: 17px; color: var(--ink-2); margin-top: 3px; line-height: 1.55; } .fleetpanel { position: absolute; left: 22px; top: 168px; width: 340px; padding: 14px 16px; z-index: 14; font-size: 16px; color: var(--cream); } .fleetpanel .fp-h { display: flex; gap: 8px; align-items: center; color: var(--brass-hi); font-size: 18px; margin-bottom: 8px; letter-spacing: .06em; } .fleetpanel .fp-h svg { width: 20px; height: 20px; } .fleetpanel .fp-ship { margin-bottom: 7px; } .fleetpanel .fp-ship .bar { margin-top: 3px; } .fleetpanel .fp-kv { display: grid; grid-template-columns: 70px 1fr; gap: 3px 10px; margin-top: 8px; color: var(--cream-2); } .fleetpanel .fp-kv small { color: var(--cream-dim); } .fleetpanel .fp-cargo { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 15px; color: var(--cream-2); border-top: 1px solid rgba(184,146,90,.3); padding-top: 8px; } .win .tabs { margin: 0 10px 8px; } /* ---------------------------------------------------------------- 술집에 서 있는 여급 */ .tavern-maid { position: absolute; left: 46px; bottom: 6px; display: flex; flex-direction: column; align-items: center; z-index: 12; cursor: pointer; } .tavern-maid .fig { display: block; height: 580px; width: 520px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6)); transition: transform .18s ease; } .tavern-maid .fig > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } .tavern-maid:hover .fig { transform: translateY(-5px) scale(1.012); } .tavern-maid .tag { margin-top: -10px; white-space: nowrap; padding: 4px 14px; border-radius: 3px; font-size: 16px; letter-spacing: .05em; color: var(--cream); background: linear-gradient(180deg, rgba(34, 26, 18, .9), rgba(18, 14, 10, .94)); border: 1px solid rgba(184, 146, 90, .55); box-shadow: 0 3px 10px rgba(0, 0, 0, .45); opacity: .85; } .tavern-maid:hover .tag { opacity: 1; color: var(--brass-hi); border-color: var(--brass); } @media (prefers-reduced-motion: reduce) { .portrait-rig .rig-layer, .portrait-rig.rig-single, .portrait-rig .rig-facefx .mouth { animation: none !important; } .dlg-actor { transition: filter .12s; } } /* ---------------------------------------------------------------- duel & poker */ .poker-table { position: relative; overflow: hidden; } .poker .row { display: flex; gap: 14px; justify-content: center; margin: 12px 0 18px; min-height: 134px; } .poker-mid { height: 96px; position: relative; display: flex; align-items: flex-end; justify-content: center; } .poker-deck { position: absolute; z-index: 4; width: 42px; height: 59px; left: calc(50% - 21px); top: -3px; opacity: 0; transform: translateY(-4px) scale(.92); transition: opacity .12s, transform .12s; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); } .poker-deck.active { opacity: 1; transform: translateY(0) scale(1); } .poker-deck b { position: absolute; inset: 0; display: block; border: 1px solid #c6a66a; border-radius: 4px; background: repeating-linear-gradient(45deg, #1e3552 0 5px, #2a4a70 5px 10px); } .poker-deck b:nth-child(1) { transform: translate(-4px, -2px) rotate(-3deg); } .poker-deck b:nth-child(2) { transform: translate(3px, -1px) rotate(2deg); } .poker-deck b:nth-child(3) { transform: translate(0, -5px); } .poker-deck.shuffling b:nth-child(1) { animation: poker-riffle-left .72s ease-in-out; } .poker-deck.shuffling b:nth-child(2) { animation: poker-riffle-right .72s ease-in-out; } .pcard { width: 96px; height: 134px; flex: 0 0 96px; border-radius: 7px; background: linear-gradient(180deg, #fffdf6, #efe6d2); border: 1px solid #6b5230; box-shadow: 0 3px 8px rgba(0,0,0,.35); position: relative; color: #222; cursor: pointer; font-family: var(--latin); transition: transform .12s; transform-origin: center; } .pcard.red { color: #a3261c; } .pcard .r { position: absolute; left: 8px; top: 6px; font-size: 22px; font-weight: 700; } .pcard .rb { position: absolute; right: 8px; bottom: 6px; font-size: 22px; font-weight: 700; transform: rotate(180deg); } .pcard .s { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-size: 46px; } .pcard .pcard-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; border-radius: inherit; pointer-events: none; } .pcard.back { background: repeating-linear-gradient(45deg, #1e3552 0 6px, #2a4a70 6px 12px); border-color: #b8925a; cursor: default; } .pcard.slot { visibility: hidden; pointer-events: none; } .pcard.held { transform: translateY(-10px); box-shadow: 0 0 0 3px #d9b45f, 0 6px 12px rgba(0,0,0,.4); } .pcard.deal-in { pointer-events: none; animation: poker-deal-in .17s cubic-bezier(.2,.72,.24,1) both; } .en .pcard.leaving { pointer-events: none; animation: poker-leave-en .26s ease-in both; } .me .pcard.leaving { pointer-events: none; animation: poker-leave-me .26s ease-in both; } .pcard i { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-style: normal; font-size: 14px; color: #7a5c33; font-weight: 700; } .plog { font-size: 19px; margin: 8px 0; } @keyframes poker-riffle-left { 0%,100% { transform: translate(-4px,-2px) rotate(-3deg); } 35% { transform: translate(-42px,-8px) rotate(-12deg); } 68% { transform: translate(-8px,-12px) rotate(4deg); } } @keyframes poker-riffle-right { 0%,100% { transform: translate(3px,-1px) rotate(2deg); } 35% { transform: translate(42px,-7px) rotate(12deg); } 68% { transform: translate(8px,-10px) rotate(-4deg); } } @keyframes poker-deal-in { from { opacity: .28; transform: translate(var(--deal-x), var(--deal-y)) rotate(var(--deal-turn)) scale(.78); } to { opacity: 1; transform: translate(0,0) rotate(0) scale(1); } } @keyframes poker-leave-en { to { opacity: 0; transform: translateY(54px) rotate(7deg) scale(.84); } } @keyframes poker-leave-me { to { opacity: 0; transform: translateY(-54px) rotate(-7deg) scale(.84); } } #ui > .fade-black, #ui > .toasts { pointer-events: none; } .cmdmenu.many { width: 480px; } .cmdmenu.many .items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .cmdmenu.many .cmd { padding: 8px 10px; font-size: 18px; gap: 9px; } .cmdmenu.many .cmd.exit { grid-column: 1 / -1; } .battlepanel { position: absolute; left: 18px; top: 66px; width: 300px; padding: 12px 14px; z-index: 14; font-size: 15px; color: var(--cream); } .battlepanel .fp-h { display: flex; gap: 8px; align-items: center; color: var(--brass-hi); font-size: 17px; margin-bottom: 8px; } .battlepanel .fp-ship { margin-bottom: 6px; } .status-strip { line-height: 1.5; } .windbox .wtxt { display: flex; flex-direction: column; justify-content: center; gap: 4px; color: var(--cream); } .hanoi { display: flex; gap: 20px; justify-content: center; height: 230px; align-items: flex-end; } .hanoi .peg { width: 220px; height: 220px; display: flex; flex-direction: column-reverse; align-items: center; position: relative; cursor: pointer; border-bottom: 10px solid #5a3a22; padding-bottom: 2px; } .hanoi .peg.sel { background: rgba(217,180,95,.18); } .hanoi .pole { position: absolute; left: 50%; bottom: 0; width: 10px; height: 200px; margin-left: -5px; background: linear-gradient(90deg, #6a4a2a, #3a2416); z-index: 0; } .hanoi .disc { height: 26px; border-radius: 8px; margin-top: 3px; position: relative; z-index: 1; box-shadow: inset 0 -4px 6px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.3); } .gems { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 16px; } .gem { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bfe0ff, #2a5a8a 70%); color: #fff; font-weight: 800; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,.35); } .gem small { font-size: 11px; } .gem.L { outline: 3px solid #c0463a; } .gem.R { outline: 3px solid #3d679a; } .pans { display: flex; align-items: center; justify-content: center; gap: 0; transition: transform .6s; margin: 10px auto; width: 520px; } .pans .pan { width: 150px; min-height: 40px; border-radius: 0 0 70px 70px; background: linear-gradient(180deg, #d6b066, #9a7431); color: #2a1f16; text-align: center; font-weight: 700; padding: 8px; } .pans .beam { width: 200px; height: 6px; background: #5a3a22; } .create .col { min-height: 0; } .create .sect { min-height: 0; } .sailbar .btn { white-space: nowrap; } .sailbar { white-space: nowrap; } .zoomctl { display: flex; flex-direction: column; gap: 2px; justify-content: center; } .zoomctl .btn { min-height: 21px; padding: 0 9px; font-size: 14px; line-height: 1; } /* ---------------------------------------------------------------- 항해사 등용 명부 */ .hirebox { display: flex; gap: 14px; height: 100%; min-height: 0; } .hire-list { width: 360px; flex: 0 0 360px; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 4px; } .hire-row { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 8px 12px; cursor: pointer; border: 1px solid rgba(184,146,90,.35); background: linear-gradient(180deg, rgba(62,45,30,.9), rgba(32,23,15,.9)); color: var(--cream); border-radius: 2px; } .hire-row:hover { border-color: var(--brass); color: #fff6de; } .hire-row.on { background: linear-gradient(180deg, #2c4a6e, #1b2f48); border-color: var(--brass-hi); } .hire-row .nm { font-size: 19px; } .hire-row .rt { font-size: 15px; color: var(--cream-dim); align-self: center; } .hire-row .sk { grid-column: 1 / -1; font-size: 13.5px; color: var(--cream-dim); letter-spacing: .01em; } .hire-row.lock { opacity: .62; } .hire-row.lock .rt { color: #e9a88c; } .hire-card { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px; } .mcard { display: flex; flex-direction: column; gap: 14px; min-height: 100%; } .mc-head { display: flex; gap: 16px; align-items: flex-start; } .mc-face canvas { border: 2px solid #7a5c33; box-shadow: 0 0 0 1px #2a1f16; display: block; } .mc-id { flex: 1; min-width: 0; } .mc-id .nm { font-size: 30px; font-weight: 800; letter-spacing: .04em; } .mc-id .mt { font-size: 15px; color: var(--ink-soft); margin-top: 3px; } .mc-id .mt b { color: var(--ink); } .mc-id .mt .renown { color: #b07a1a; white-space: nowrap; } .mc-id .warn { color: #8a2a1e; } .mc-desc { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); } .mc-cols { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 16px; align-items: start; } .mc-col h5 { margin: 0 0 7px; font-size: 15px; letter-spacing: .1em; color: var(--ink-soft); border-bottom: 1px solid rgba(90,65,35,.35); padding-bottom: 4px; font-weight: 700; } .statline { display: grid; grid-template-columns: 34px 1fr 30px; gap: 8px; align-items: center; font-size: 16px; margin: 5px 0; } .statline .bar { display: block; height: 9px; background: #cbbd9c; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } .statline .bar > i { display: block; height: 100%; background: linear-gradient(180deg, #3a5f8c, #22405f); } .statline b { text-align: right; font-variant-numeric: tabular-nums; } .pipline { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 16px; margin: 5px 0; align-items: baseline; } .pipline i { font-style: normal; letter-spacing: 2px; color: var(--brass-deep); } .pipline em { grid-column: 1 / -1; font-style: normal; font-size: 13px; color: var(--ink-soft); margin-top: -3px; } .pipline.ok em { color: #2e6a36; } .mc-col .none { font-size: 15px; color: var(--ink-soft); } .mc-foot { margin-top: auto; display: flex; gap: 14px; align-items: center; border-top: 1px solid rgba(90,65,35,.3); padding-top: 12px; } .mc-note { flex: 1; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; } /* ---------------------------------------------------------------- 이 도시에서 할 일 */ .todo { position: absolute; left: 22px; top: 176px; width: 360px; padding: 8px 10px 10px; z-index: 14; display: flex; flex-direction: column; gap: 2px; background-color: rgba(26,18,12,.9); } .todo .th { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--brass-hi); letter-spacing: .06em; margin-bottom: 3px; } .todo .th .x { margin-left: auto; cursor: pointer; color: var(--cream-dim); padding: 0 4px; } .todo .th .x:hover { color: #fff; } .todo .th svg { width: 18px; height: 18px; } .todo .tr { display: flex; align-items: center; gap: 9px; padding: 5px 8px; font-size: 15px; line-height: 1.35; color: var(--cream-2); cursor: pointer; border: 1px solid transparent; border-radius: 2px; } .todo .tr svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--brass); } .todo .tr:hover { border-color: rgba(184,146,90,.55); background: rgba(255,240,200,.06); color: #fff6de; } .todo .tr.hot { color: #ffe3a8; } .todo .tr.hot svg { color: #ffcf6a; } /* 개척 현황 (항해 수첩 · 발견물) */ .frboard { background: rgba(255,250,236,.38); border: 1px solid rgba(110,80,40,.3); border-radius: 6px; padding: 10px 12px 8px; margin-bottom: 12px; } .frboard .fr-title { font-weight: 800; font-size: 17px; margin-bottom: 6px; } .frboard .fr-title small { font-weight: 400; font-size: 14px; } .fr-row { display: flex; align-items: flex-start; gap: 10px; margin: 5px 0; } .fr-road { flex: 0 0 132px; font-weight: 700; font-size: 15px; padding-top: 7px; color: #5a3e1e; } .fr-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; } .fr-chip { padding: 3px 9px 4px; border-radius: 5px; border: 1px solid rgba(90,65,35,.35); background: rgba(90,65,35,.07); line-height: 1.2; cursor: help; } .fr-chip b { display: block; font-size: 15px; white-space: nowrap; } .fr-chip small { font-size: 12.5px; color: #6b5438; white-space: nowrap; } .fr-chip.lv0 { opacity: .5; border-style: dashed; } .fr-chip.lv1 { background: rgba(214,170,70,.2); border-color: rgba(170,120,30,.55); } .fr-chip.lv2 { background: rgba(222,138,48,.26); border-color: rgba(180,100,20,.65); } .fr-chip.lv3 { background: rgba(86,138,74,.16); border-color: rgba(60,110,50,.5); } .fr-chip.lv3.t2 { background: rgba(70,126,60,.26); } .fr-chip.lv3.t3 { background: rgba(52,104,46,.36); } .fr-arrow { color: #8a6a40; font-size: 17px; margin: 0 1px; } .fr-goals { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(110,80,40,.3); font-size: 15px; line-height: 1.6; } /* 원정 계획 */ .plan { border: 1px solid rgba(110,80,40,.35); background: rgba(255,250,236,.4); border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; font-size: 16px; } .plan-h { font-weight: 800; margin-bottom: 4px; } .plan-h small { font-weight: 400; color: #6b5438; } .plan-row { display: flex; flex-wrap: wrap; gap: 4px 16px; } .plan-row b { font-size: 18px; } .plan-sum { margin-left: auto; } .plan-note { margin-top: 6px; font-size: 15px; line-height: 1.5; } .plan-foot { margin-top: 4px; font-size: 13px; color: #7a6448; } /* ---------------------------------------------------------------- 해도 보기 (ChartView) */ .chartview { position: relative; border: 2px solid #7a5c33; background: #d6c49c; user-select: none; } .chartview canvas { touch-action: none; } .mapcatch { touch-action: none; } /* 바다·육지 화면: 브라우저가 페이지를 확대·스크롤하지 않고 게임이 두 손가락 확대를 받는다 */ .cv-zoom { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; } .cv-zoom .btn { min-width: 44px; padding: 4px 10px; font-size: 17px; } .cv-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 70%; padding: 5px 10px; background: rgba(242,231,204,.88); border: 1px solid rgba(110,80,40,.45); font-size: 13px; color: #3a2410; } .cv-legend span { display: inline-flex; align-items: center; gap: 5px; } .cv-legend .lg { display: inline-block; width: 11px; height: 11px; } .cv-legend .dot { border-radius: 50%; } .cv-legend .dot.v { background: #7a1e1e; } .cv-legend .dot.k { background: #3a2a1a; } .cv-legend .dot.in { background: #f2e7cc; border: 1.6px solid #3a2a1a; box-sizing: border-box; } .cv-legend .ring { border-radius: 50%; border: 2.4px solid #1f7a78; box-sizing: border-box; } .cv-legend .dia { width: 8px; height: 8px; background: #c9a030; border: 1px solid #3a2a10; transform: rotate(45deg); } .cv-legend .flag { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 10px solid #b01e1e; } .cv-legend .me { border-radius: 50%; background: #1e3552; border: 2px solid #f2e7cc; box-sizing: border-box; } .cv-info { position: absolute; top: 10px; right: 10px; width: 350px; max-height: calc(100% - 20px); overflow-y: auto; padding: 12px 14px; background: rgba(250,244,228,.97); border: 1px solid #7a5c33; box-shadow: 0 6px 18px rgba(40,25,10,.35); color: #2e1c0c; font-size: 15px; } .cv-info .ci-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #5a3a1e; } .ci-h { display: flex; align-items: baseline; gap: 8px; padding-right: 22px; } .ci-h b { font-size: 22px; } .ci-sub { color: #7a6048; font-size: 14px; } .ci-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; } .citag { font-size: 12.5px; padding: 1px 7px; border-radius: 3px; border: 1px solid; } .citag.auto { color: #1f5f5d; border-color: #1f7a78; background: rgba(31,122,120,.1); } .citag.sp { color: #6a4a10; border-color: #c9a030; background: rgba(201,160,48,.14); } .citag.ct { color: #8a1a1a; border-color: #b01e1e; background: rgba(176,30,30,.08); } .citag.home { color: #1e3552; border-color: #1e3552; background: rgba(30,53,82,.08); } .citag.new { color: #7a6048; border-color: rgba(122,96,72,.5); } .ci-tbl { width: 100%; border-collapse: collapse; } .ci-tbl th { text-align: left; vertical-align: top; white-space: nowrap; padding: 5px 10px 5px 0; color: #6a4a2a; font-weight: 600; font-size: 14px; } .ci-tbl td { padding: 5px 0; border-bottom: 1px solid rgba(110,80,40,.15); line-height: 1.45; } .ci-src { font-size: 12.5px; color: #7a6048; } .ci-hint { font-size: 12.5px; color: #8a5a2a; font-style: italic; } .cibar { display: inline-block; width: 70px; height: 7px; background: rgba(90,60,30,.18); vertical-align: middle; margin-right: 4px; } .cibar i { display: block; height: 100%; background: #6a8a3a; } .ci-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* ---------------------------------------------------------------- 도서관 서가 */ .shelfwin .content { padding: 14px 18px 18px; background: linear-gradient(#1b120b, #120c07); } .bshelf-head { display: flex; align-items: center; gap: 22px; font-size: 16px; color: var(--cream-2); margin: 0 4px 10px; flex-wrap: wrap; } .bshelf-head .lg { display: inline-flex; align-items: center; gap: 8px; } .bshelf-head .lg .bk { display: inline-block; width: 12px; height: 26px; animation: none; } .bshelf-head .lg .bk.open { box-shadow: 0 0 7px 2px rgba(255,208,90,.55); } .bshelf-head .cnt { margin-left: auto; color: var(--cream-dim); font-size: 15px; } .bcase { position: relative; padding: 16px 22px 10px; border-radius: 4px; background: linear-gradient(90deg, #2a1a0e 0, #3a2614 22px, #24170c 23px, #24170c calc(100% - 23px), #3a2614 calc(100% - 22px), #2a1a0e 100%); box-shadow: inset 0 0 0 2px #120a04, inset 0 14px 22px -10px rgba(0,0,0,.8), 0 8px 22px rgba(0,0,0,.6); } .brow { position: relative; margin-bottom: 6px; } .bline { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding: 0 8px; overflow: visible; background: linear-gradient(#0d0804, #1c1209 70%, #150d06); box-shadow: inset 0 10px 18px rgba(0,0,0,.7); } .bplank { height: 16px; background: linear-gradient(#6a4a2a, #4a3119 55%, #2e1d0e); box-shadow: 0 5px 10px rgba(0,0,0,.6); border-radius: 0 0 2px 2px; } .bk { position: relative; flex: 0 0 auto; border-radius: 2px 2px 1px 1px; box-shadow: inset -2px 0 3px rgba(0,0,0,.45), inset 2px 0 2px rgba(255,255,255,.08); } .bk.fill { background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.05) 30%, rgba(0,0,0,.25) 80%), var(--c); opacity: .62; filter: saturate(.65); } .bk.fill.band::before, .bk.real::before { content: ''; position: absolute; left: 0; right: 0; top: 14%; height: 5px; border-top: 1px solid rgba(214,180,110,.35); border-bottom: 1px solid rgba(214,180,110,.35); } .bk.fill.band::after, .bk.real::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10%; height: 5px; border-top: 1px solid rgba(214,180,110,.35); border-bottom: 1px solid rgba(214,180,110,.35); } .bk.real { cursor: pointer; transition: transform .16s ease, box-shadow .2s; } .bk.real .lab { position: absolute; left: 20%; right: 20%; top: 30%; height: 26%; border: 1px solid rgba(214,180,110,.45); border-radius: 1px; } .bk.real .rib { display: none; position: absolute; right: 5px; top: -4px; width: 5px; height: 26px; background: #7b1d1a; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); } .bk.real.again .rib { display: block; } .bk.real:hover, .bk.real.focus { transform: translateY(-12px); } .bk.real.focus { outline: 2px solid var(--brass-hi); outline-offset: 2px; } .bk.read { background: linear-gradient(90deg, #070605, #2a2420 42%, #15110e 76%, #050404); } .bk.read .lab { border-color: rgba(150,125,80,.4); } .bk.open { background: linear-gradient(90deg, #a87a24, #f3d470 38%, #dcb04a 70%, #93681e); box-shadow: 0 0 12px 3px rgba(255,208,90,.5), inset 0 0 3px rgba(255,244,200,.8); animation: bkglow 2.4s ease-in-out infinite; } .bk.open::before, .bk.open::after { border-color: rgba(90,55,10,.55); } .bk.open .lab { border-color: rgba(90,55,10,.6); } .bk.lock { background: linear-gradient(90deg, #3e0d09, #9a2a1f 42%, #761b14 76%, #300906); } .bk.lock .lab { border-color: rgba(230,160,130,.35); } @keyframes bkglow { 50% { box-shadow: 0 0 20px 6px rgba(255,214,110,.72), inset 0 0 4px rgba(255,248,215,.95); } } @media (prefers-reduced-motion: reduce) { .bk.open { animation: none; } .bk.real { transition: none; } } .bstack { display: flex; flex-direction: column-reverse; gap: 1px; align-self: flex-end; opacity: .62; filter: saturate(.65); } .bstack i { display: block; height: 17px; border-radius: 1px; box-shadow: inset 0 -2px 2px rgba(0,0,0,.4); } .btag { position: absolute; z-index: 5; transform: translateY(-100%); pointer-events: none; white-space: nowrap; background: var(--parch); color: var(--ink); padding: 7px 14px 8px; border: 1px solid var(--brass-dk); border-radius: 3px; box-shadow: 0 6px 16px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; } .btag b { font-size: 19px; } .btag span { font-size: 15px; color: var(--ink-2); } .btag.lock { border-color: var(--red-hi); } .btag.open { border-color: #b8892a; box-shadow: 0 0 14px rgba(255,208,90,.45), 0 6px 16px rgba(0,0,0,.6); } .bplate { margin-top: 12px; min-height: 58px; padding: 9px 16px; border-radius: 3px; font-size: 18px; line-height: 1.5; color: var(--ink); background: linear-gradient(#e7d5a6, #cdb47c); border: 1px solid var(--brass-dk); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .bplate .muted { color: var(--ink-soft); } .bplate .st { font-size: 16px; color: var(--ink-2); } .bplate .pk { display: inline-block; width: 10px; height: 20px; margin-right: 8px; vertical-align: -4px; border-radius: 1px; } .bplate .pk.read { background: #1a1512; } .bplate .pk.open { background: #e2bb4f; box-shadow: 0 0 6px rgba(200,150,40,.8); } .bplate .pk.lock { background: #8c241b; } /* 항해일지 책·자택 서고 (js/systems/logbooks.js — 2026-10-24) */ .bk.jv { background: linear-gradient(90deg, #0c1428, #23345e 40%, #182648 76%, #080e1d); } .bk.jv::before, .bk.jv::after { border-color: rgba(226,190,110,.6) !important; } .bk.jv .lab { border-color: rgba(226,190,110,.7); display: flex; align-items: center; justify-content: center; } .bk.jv .lab em, .bk.tome .lab em { font-style: normal; font-size: 13px; color: #e8c97a; writing-mode: vertical-rl; letter-spacing: 1px; } .bk.jv.writing .rib { display: block; background: #b08a2a; } .bk.tome { background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.10) 35%, rgba(0,0,0,.2) 78%, rgba(0,0,0,.5)), var(--c, #5b3a1e); } .bk.tome .lab { border-color: rgba(214,180,110,.5); } .bshelf-head .lg .bk.jv, .bshelf-head .lg .bk.tome { box-shadow: none; } .bplate .pk.jv { background: #23345e; box-shadow: 0 0 0 1px #c9a352 inset; } .bplate .pk.tome { background: #6a4a22; } .btag.jv { border-color: #c9a352; } .studywin .bempty { min-height: 116px; display: flex; align-items: flex-end; padding: 0 8px 10px; color: var(--cream-dim); font-size: 15px; } .lbkwin .lbk-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; font-size: 18px; flex-wrap: wrap; } .lbkwin .lbk-head b { font-size: 22px; } .lbkwin .lbk-body { max-height: 62vh; overflow: auto; font-size: 17px; line-height: 1.7; padding-right: 6px; } .lbkwin .lbk-year { margin: 12px 0 4px; padding-bottom: 2px; border-bottom: 1px solid rgba(90,65,35,.35); } .lbkwin .lbk-line { display: flex; gap: 10px; align-items: flex-start; padding: 2px 0; } .lbkwin .lbk-line > span:first-child { flex: 0 0 58px; } /* 펼친 책 */ .obook { display: flex; padding: 16px; background: linear-gradient(#3a2412, #24160b); border-radius: 6px; box-shadow: inset 0 0 0 2px #140b04; } .obook .pg { flex: 1; min-height: 340px; padding: 26px 30px; color: var(--ink); background: linear-gradient(90deg, #efe3c4, #e6d6b0); } .obook .pg.l { border-radius: 6px 0 0 6px; box-shadow: inset -22px 0 26px -14px rgba(70,45,15,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .obook .pg.r { border-radius: 0 6px 6px 0; box-shadow: inset 22px 0 26px -14px rgba(70,45,15,.5); background: linear-gradient(90deg, #e6d6b0, #efe3c4); } .obook .bt { font-size: 30px; font-weight: 800; line-height: 1.35; text-wrap: balance; } .obook .ba { font-size: 19px; color: var(--ink-2); margin-top: 12px; } .obook .bm { font-size: 15.5px; color: var(--ink-soft); margin-top: 14px; } .obook .orn { color: var(--brass-dk); letter-spacing: .4em; margin: 0 0 20px; font-size: 15px; } .obook .orn.low { margin: 22px 0 0; } .obook .tx { font-size: 19px; line-height: 1.9; text-indent: 1em; } .obook .tx::first-letter { font-size: 1.9em; font-weight: 800; color: var(--red-hi); } .bgain { margin-top: 12px; padding: 10px 14px; border-radius: 4px; } .bgain .gh { font-size: 18px; font-weight: 700; margin: 2px 2px 6px; } .bgain .gn { font-size: 15px; margin: 8px 2px 0; } .bnote { margin-top: 10px; font-size: 15px; color: var(--cream-dim); text-align: right; } .bshut { display: flex; gap: 22px; align-items: stretch; } .bshut .spine { width: 46px; min-height: 170px; border-radius: 2px; flex: 0 0 auto; } .bshut .spine.lock { background: linear-gradient(90deg, #3e0d09, #9a2a1f 42%, #761b14 76%, #300906); box-shadow: inset -2px 0 3px rgba(0,0,0,.45); } .bshut .bt { font-size: 26px; font-weight: 800; } .bshut .ba { font-size: 18px; color: var(--ink-2); margin-top: 6px; } .bshut .bm { font-size: 15.5px; color: var(--ink-soft); margin-top: 8px; } .bshut .why { margin-top: 16px; font-size: 18px; line-height: 1.6; color: #6e1e16; } /* ---------------------------------------------------------------- 성문 마구간 (탈것 고르기) */ .outfitwin .content { padding: 14px 18px 16px; } .outfit .of-head { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-bottom: 10px; } .outfit .of-head .of-meta { white-space: nowrap; color: var(--ink); } .outfit .of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; } .outfit .of-card { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px 10px; border: 1px solid rgba(90,60,30,.32); border-radius: 6px; background: rgba(255,250,236,.45); cursor: pointer; transition: box-shadow .15s, border-color .15s, background .15s; outline: none; } .outfit .of-card:hover { background: rgba(255,250,236,.7); border-color: rgba(122,92,51,.6); } .outfit .of-card.sel { border: 2px solid var(--brass); padding: 7px 8px 9px; background: rgba(255,246,222,.9); box-shadow: 0 0 0 3px rgba(217,180,95,.28), 0 4px 14px rgba(60,40,10,.25); } .outfit .of-card.short { opacity: .72; } .outfit .of-card canvas { width: 100%; height: auto; aspect-ratio: 264 / 122; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); } .outfit .of-name { font-size: 20px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .outfit .of-tag { font-size: 13px; font-weight: 600; color: #fff; background: var(--green); border-radius: 10px; padding: 1px 8px; } .outfit .of-sub { font-size: 13px; font-weight: 400; color: var(--ink-soft); } .outfit .of-price { font-size: 14px; color: var(--ink-2); } .outfit .of-price.short { color: var(--warn); } .outfit .of-best { font-size: 14px; color: var(--ink-2); } .outfit .of-best b { color: var(--green); font-variant-numeric: tabular-nums; } .outfit .of-terr { display: flex; flex-wrap: wrap; gap: 3px; } .outfit .of-stat { font-size: 13px; color: var(--ink-soft); } .outfit .of-desc { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .outfit .of-legend { margin-top: 10px; font-size: 13px; color: var(--ink-soft); } .tc { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 3px; background: rgba(120,100,70,.14); color: var(--ink-2); white-space: nowrap; } .tc b { font-size: 12px; } .tc.best { background: rgba(59,106,62,.22); color: #24502a; } .tc.good { background: rgba(120,140,60,.20); color: #45561c; } .tc.mid { background: rgba(150,120,70,.16); color: #6a5230; } .tc.bad { background: rgba(155,58,44,.18); color: #7a2418; } .hud .suit, .status-strip .suit { font-weight: 700; } .hud .suit.best, .status-strip .suit.best { color: #9fdc8a; } .hud .suit.good, .status-strip .suit.good { color: #d0e08a; } .hud .suit.mid, .status-strip .suit.mid { color: #e3c68d; } .hud .suit.bad, .status-strip .suit.bad { color: #ff9a7a; } .tag.hurt { background: var(--red); color: var(--cream); } /* 발견 유물 */ .relic-strip { border-top: 1px dashed rgba(90,65,35,.45); padding-top: 10px; } .relic-strip .rs-head { font-size: 15px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; margin-bottom: 8px; text-align: center; } .relic-strip .rs-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .relic-strip .rs-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 132px; text-align: center; } .relic-strip .rs-item b { font-size: 16px; line-height: 1.25; } .relic-strip .rs-item small { font-size: 13px; color: var(--ink-soft); } .disc-card .relic-strip canvas { width: 76px; height: 76px; border: 1px solid #7a5c33; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .relic-strip .rs-note { font-size: 14px; color: var(--ink-soft); text-align: center; margin-top: 8px; } .items-tbl td.ic { width: 54px; padding: 4px 6px; } .items-tbl canvas.relic-ic { width: 52px; height: 52px; border-radius: 6px; border: 1px solid #7a5c33; background: radial-gradient(circle, #f5e7c4, #b7925d); display: block; } .story-photo-pendant { position: relative; width: 52px; height: 60px; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; filter: drop-shadow(0 2px 2px rgba(46,27,8,.45)); } .story-photo-pendant::before { content: ''; position: absolute; z-index: 0; left: 19px; top: 0; width: 12px; height: 12px; box-sizing: border-box; border: 3px solid #9b6a25; border-radius: 50%; background: #d3a957; box-shadow: inset 0 0 0 1px #f5d990; } .story-photo-pendant::after { content: ''; position: absolute; z-index: 1; left: 3px; top: 8px; width: 46px; height: 52px; box-sizing: border-box; border: 5px ridge #c6963d; border-radius: 50%; background: linear-gradient(135deg, #f4d98c, #80541d 55%, #d6ae5a); box-shadow: inset 0 0 0 1px #5f3c13; } .story-photo-pendant-picture { position: absolute; z-index: 2; left: 10px; top: 15px; width: 32px; height: 39px; border-radius: 50%; display: block; object-fit: cover; } .story-photo-pendant:hover, .story-photo-pendant:focus-visible { transform: translateY(-1px) scale(1.05); filter: drop-shadow(0 3px 3px rgba(46,27,8,.58)) brightness(1.08); outline: none; } .story-photo { cursor: zoom-in; } .story-photo:focus-visible { outline: 3px solid #a8792f; outline-offset: 3px; border-radius: 6px; } .story-photo-view { display: flex; justify-content: center; padding: 46px 28px 16px; overflow: visible; } .story-photo-locket { position: relative; width: min(500px, calc(100% - 80px)); aspect-ratio: 4 / 5; padding: 17px; border-radius: 50%; box-sizing: border-box; background: linear-gradient(135deg, #ffe8a6 0%, #a97224 22%, #f1cf72 44%, #72501e 68%, #dcae4d 100%); box-shadow: inset 0 0 0 3px #5c3a13, inset 0 0 0 8px rgba(255,239,171,.55), 0 12px 28px rgba(33,19,7,.52); } .story-photo-locket::before { content: ''; position: absolute; z-index: 0; left: calc(50% - 30px); top: -48px; width: 60px; height: 60px; box-sizing: border-box; border: 13px ridge #bd8731; border-radius: 50%; background: #d7aa51; box-shadow: inset 0 0 0 2px #5f3c13, 0 3px 5px rgba(41,24,8,.42); } .story-photo-locket::after { content: ''; position: absolute; z-index: 3; inset: 17px; border: 5px ridge rgba(255,226,137,.9); border-radius: 50%; box-shadow: inset 0 0 16px rgba(33,18,5,.55); pointer-events: none; } .story-photo-large { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; display: block; } .story-photo-caption { display: grid; grid-template-columns: max-content 1fr; gap: 14px; margin-top: 12px; font-size: 15px; line-height: 1.55; } .story-photo-caption span { color: var(--ink-soft); } .win.story-cut-win { min-width: 0; } .win.story-cut-win .content { padding: 0; overflow: hidden; background: #0b0806; } .story-cut-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0806; } .story-cut-image { display: block; width: 100%; height: 100%; object-fit: cover; } .story-cut-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 34px 20px; color: #f5e8c7; font-size: 18px; line-height: 1.45; letter-spacing: .02em; text-shadow: 0 2px 5px #000, 0 0 12px #000; background: linear-gradient(transparent, rgba(8,5,3,.78)); } .items-tbl td:nth-child(3) { white-space: nowrap; } /* 캠프파이어 */ .campfire { display: flex; flex-direction: column; gap: 10px; } /* 사건 그림창 (js/art/eventfx.js) — 대화창 바로 위 */ .eventfx { position: absolute; z-index: 59; padding: 10px; pointer-events: none !important; opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease; } .eventfx.on { opacity: 1; transform: none; } .eventfx canvas { display: block; border: 1px solid #0c0806; box-shadow: inset 0 0 0 1px rgba(227,198,141,.2); } /* 틀 없이: 항해·탐험 화면 위에 그림만 (G.FX.sprites.eventFrame false) */ .eventfx.bare { padding: 0; background: none; border: none; box-shadow: none; } .eventfx.bare canvas { border: none; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); } .eventfx.bare .eventfx-title { top: -6px; background: none; border: none; box-shadow: none; text-shadow: 0 2px 4px #000, 0 0 10px rgba(0,0,0,.8); } .eventfx-flash { position: absolute; inset: 0; z-index: 58; pointer-events: none; background: rgba(230,236,255,.32); transition: opacity .32s ease; } .eventfx-flash.off { opacity: 0; } .eventfx-title { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 3px 18px; font-size: 16px; letter-spacing: .08em; color: var(--cream); background: linear-gradient(180deg, #3a2a1a, #23180e); border: 1px solid #0c0806; box-shadow: inset 0 0 0 1px rgba(227,198,141,.3); white-space: nowrap; } .campfire canvas { width: 100%; height: auto; display: block; border: 2px solid #7a5c33; } .campfire .cf-text { font-size: 19px; line-height: 1.7; } .campfire .cf-res { font-size: 16px; color: var(--ink-soft); text-align: center; } /* 같은 곳 맴돌며 야영하기: 윌슨·표류기 (js/systems/castaway.js) */ .castaway { display: flex; gap: 18px; align-items: center; } .castaway .cw-art { flex: 0 0 200px; height: 200px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 60%, rgba(255,190,110,.35), rgba(60,36,16,.15) 70%); border: 2px solid #7a5c33; border-radius: 6px; } .castaway .cw-art img { width: 184px; height: 184px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); } .castaway .cw-body { flex: 1; display: flex; flex-direction: column; gap: 10px; } .castaway .cw-text { font-size: 18px; line-height: 1.7; } .castaway .cw-res { font-size: 15px; color: var(--ink-soft); } @media (max-width: 700px) { .castaway { flex-direction: column; } .castaway .cw-art { flex-basis: auto; width: 180px; height: 180px; } } /* 해전: 배 번호·기함 표 */ .shipno { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; margin-right: 6px; font-size: 12px; font-weight: 800; background: rgba(10,14,24,.6); color: #e8f0d8; border: 1px solid #b8d0a0; } .shipno.en { color: #ffd0c4; border-color: #ffb0a0; } .shipno.flag { background: #e2b04a; color: #2a1606; border: 2px solid #fff2cc; } .shipno.en.flag { background: #d8503a; } .flagtag { margin-left: 6px; padding: 0 5px; font-size: 11px; font-weight: 800; color: #1a0e04; background: rgba(226,176,74,.9); border-radius: 3px; } .flagtag.en { background: rgba(216,80,58,.9); } /* 육상전 */ .lwar { display: flex; flex-direction: column; gap: 10px; } .lwar canvas { width: 100%; height: auto; display: block; border: 2px solid #7a5c33; box-shadow: 0 0 0 1px #2a1f16; cursor: crosshair; } .lwar .lw-bar { display: flex; flex-direction: column; gap: 8px; } .lwar .lw-log { min-height: 52px; font-size: 17px; line-height: 1.5; } .lwar .lw-log .old { color: var(--ink-soft); font-size: 15px; } .lwar .lw-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .lwar .lw-btns .btn small { opacity: .8; margin-left: 3px; } .lwar .lw-btns .btn.on { box-shadow: 0 0 0 3px var(--gold); } .lwar .lw-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; } .lwar .lw-slot { display: flex; flex-direction: column; align-items: center; min-width: 92px; line-height: 1.2; } .lwar .lw-slot small { font-size: 13px; opacity: .8; } .lwar .lw-help { font-size: 14px; text-align: center; } .lwar .lw-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; width: 100%; } .lwar .lw-units { display: flex; flex-direction: column; gap: 6px; align-items: center; } .lwar .lw-units .lw-row .btn.on, .lwar .lw-units .lw-slot.on { box-shadow: 0 0 0 3px #78dcff; } .lwar .lw-card { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } .lwar .lw-cmdr { display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-size: 14px; } .lwar .lw-cmdr small { font-size: 12px; opacity: .8; } .lwar .lw-btns .btn.disabled small { opacity: .6; } .lwar .lw-sep { width: 1px; align-self: stretch; background: rgba(90,60,30,.35); margin: 0 4px; } .lwar .lw-u { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .lwar .lw-u small { font-size: 13px; opacity: .85; } .lwar .lw-u.on { box-shadow: 0 0 0 3px #78dcff; } .lwar .lw-stage { position: relative; } .lwar .lw-pop { position: absolute; z-index: 5; min-width: 230px; max-width: 400px; padding: 8px 10px 9px; background: rgba(24,18,12,.94); border: 1px solid var(--brass); border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.5); color: var(--cream); } .lwar .lw-pop[hidden], .lwar .lw-tip[hidden] { display: none; } .lwar .lp-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 16px; } .lwar .lp-head small { color: var(--cream-dim); font-size: 13px; } .lwar .lp-row { display: flex; gap: 5px; flex-wrap: wrap; } .lwar .lp-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 56px; height: 52px; padding: 0; border-radius: 8px; cursor: pointer; background: linear-gradient(180deg, #3b2c1c, #241a10); border: 1px solid #6b5332; color: var(--cream); font-family: var(--serif); } .lwar .lp-act i { font-style: normal; font-size: 20px; line-height: 1; color: var(--brass-hi); } .lwar .lp-act span { font-size: 13px; } .lwar .lp-act:hover { filter: brightness(1.25); } .lwar .lp-act.on { background: linear-gradient(180deg, #2c5a7e, #183450); border-color: #78dcff; box-shadow: 0 0 0 2px rgba(120,220,255,.45); } .lwar .lp-act.on i { color: #bfefff; } .lwar .lp-act.dis { opacity: .35; cursor: default; filter: grayscale(.6); } .lwar .lp-lbl { margin: 8px 0 4px; font-size: 13px; color: var(--cream-dim); } .lwar .lp-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 128px; overflow-y: auto; } .lwar .lp-chip { display: inline-flex; flex-direction: column; align-items: center; padding: 3px 9px; border-radius: 14px; cursor: pointer; font-family: var(--serif); font-size: 14px; line-height: 1.15; background: rgba(255,255,255,.06); border: 1px solid #6b5332; color: var(--cream); } .lwar .lp-chip small { font-size: 11px; color: var(--brass-hi); } .lwar .lp-chip.star { border-color: var(--brass); } .lwar .lp-chip.on { background: #2c5a7e; border-color: #78dcff; } .lwar .lp-chip.dis { opacity: .35; cursor: default; } .lwar .lp-note { margin-top: 6px; font-size: 13px; color: var(--cream-2); } .lwar .up { color: #8ee08e; margin-right: 8px; } .lwar .dn { color: #ff9a80; } .lwar .lw-tip { position: absolute; z-index: 6; pointer-events: none; max-width: 300px; padding: 6px 10px; background: rgba(12,9,6,.9); border: 1px solid rgba(184,146,90,.6); border-radius: 7px; color: var(--cream); font-size: 14px; line-height: 1.4; } .lwar .lw-tip small { font-size: 12.5px; color: var(--cream-2); } .lwar .lw-main { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; } .lwar .lw-grow { flex: 1; } .lwar .lw-main .btn { white-space: nowrap; flex-shrink: 0; } .lwar .lw-main .btn.small { padding: 5px 11px; font-size: 15px; letter-spacing: .01em; } .lwar .lw-lbl { font-size: 14px; color: var(--ink-soft, #6a5030); } .lwar .lw-seg { display: inline-flex; } .lwar .lw-seg .btn { border-radius: 0; margin-left: -1px; } .lwar .lw-seg .btn:first-child { border-radius: 6px 0 0 6px; } .lwar .lw-seg .btn:last-child { border-radius: 0 6px 6px 0; } .lwar .btn.gold { background: linear-gradient(180deg, #a7822f, #6a4f17); border-color: #e3c68d; color: #fff6dc; } .lwar .lw-go { font-size: 18px; padding: 8px 16px; font-weight: 700; white-space: nowrap; } .lwar .btn .k { display: inline-block; min-width: 16px; margin-right: 5px; padding: 0 3px; border-radius: 4px; background: rgba(0,0,0,.35); font-size: 12px; line-height: 16px; text-align: center; color: var(--cream-dim); } .lwar .lw-ops { display: flex; gap: 4px; } .lwar .btn.lw-op { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; min-height: 58px; padding: 3px 2px; font-size: 13px; line-height: 1.1; letter-spacing: 0; } .lwar .btn.lw-op .k { position: absolute; top: 2px; left: 2px; margin: 0; font-size: 10px; line-height: 13px; min-width: 13px; } .lwar .btn.lw-op i { font-style: normal; font-size: 20px; color: var(--brass-hi); line-height: 1.05; } .lwar .btn.lw-op b { font-weight: 600; white-space: nowrap; } .lwar .btn.lw-op small { margin: 0; font-size: 11px; color: var(--cream-2); } .lwar .btn.lw-op em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 24px; font-weight: 800; color: #fff; background: rgba(0,0,0,.45); border-radius: inherit; } .lwar .btn.lw-op.on { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(217,180,95,.6); } /* 윗줄 상태 표시: 두 줄 칸 (대항해시대 3처럼 이름 + 값) */ .hud .cell.two { gap: 7px; padding: 0 12px; height: 42px; } .hud .cell.two .tv { display: flex; flex-direction: column; justify-content: center; line-height: 1.12; } .hud .cell.two em { font-style: normal; font-size: 12px; color: var(--cream-dim); letter-spacing: .08em; } .hud .cell.two span { font-size: 17px; } .hud .cell.two svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; } .hud.dense .cell.two { padding: 0 9px; } .hud.dense .cell.two span { font-size: 16px; } .hud .cell.two.val-warn span { color: #ff9f7a; } .hud .cell .dots { letter-spacing: -1px; color: #e8c878; font-size: 13px; margin-left: 3px; } .hud .supply-state { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 8px; font-size: 10px !important; line-height: 1.2; color: #2a160c !important; background: #e6b75a; vertical-align: 1px; } .hud .supply-state.crisis { color: #fff4e8 !important; background: #a82e24; animation: supplyPulse 1s ease-in-out infinite alternate; } @keyframes supplyPulse { from { box-shadow: 0 0 0 rgba(255,100,70,0); } to { box-shadow: 0 0 10px rgba(255,100,70,.85); } } /* 발견 카드의 감정 여파 */ .disc-folk { margin: 10px auto; padding: 8px 14px 10px; width: 100%; max-width: 640px; box-sizing: border-box; border: 1px solid rgba(94,67,34,.32); border-radius: 6px; background: rgba(255,248,222,.5); text-align: left; } .disc-folk .df-title { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 17px; color: var(--ink); margin-bottom: 4px; } .disc-folk .df-title svg { width: 18px; height: 18px; } .disc-folk dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 14px; line-height: 1.45; } .disc-folk dt { color: #6a3a14; font-weight: bold; white-space: nowrap; } .disc-folk dd { margin: 0; color: var(--ink-2); } .disc-impact { margin: 12px auto; padding: 10px 14px; max-width: 610px; border: 1px solid rgba(94,67,34,.38); border-radius: 6px; background: rgba(255,248,222,.56); text-align: left; } .disc-impact.fear { border-color: rgba(126,32,28,.55); background: rgba(126,32,28,.09); } .disc-impact .di-title { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 18px; color: var(--ink); } .disc-impact .di-title svg { width: 20px; height: 20px; } .disc-impact .di-line { margin: 5px 0 8px; text-align: center; font-size: 15px; color: var(--ink-2); } .disc-impact .di-stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .disc-impact .di-stats span { padding: 3px 9px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink); background: rgba(122,92,51,.13); } /* 수첩 소지품 안의 재사용 이동 장비 */ .mount-gear { padding: 10px 12px 12px; border: 1px solid rgba(90,60,30,.3); border-radius: 6px; background: rgba(255,247,224,.42); } .mount-gear h4 { margin: 0 0 9px; font-size: 20px; } .mount-gear h4 small { font-size: 13px; font-weight: 400; color: var(--ink-soft); } .mount-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 8px; } .mount-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid rgba(90,60,30,.28); border-radius: 5px; background: rgba(255,255,255,.38); } .mount-item.active { border-color: var(--green); box-shadow: inset 3px 0 var(--green); } .mount-item .mi-icon svg { width: 36px; height: 36px; color: #67451f; } .mount-item .mi-body { flex: 1; min-width: 0; } .mount-item .mi-at { color: var(--green); font-size: 14px; font-weight: 700; margin: 2px 0; } .mount-item small { color: var(--ink-soft); font-size: 13px; line-height: 1.35; } .mount-rule { margin-top: 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; } /* 일기토 (삼국지 6식 방침·기술 + 대항해시대 2식 갑판 결투) */ .rduel { display: flex; flex-direction: column; gap: 8px; } .rduel .rd-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .rduel .rd-side { display: flex; gap: 10px; align-items: center; } .rduel .rd-side.en { justify-content: flex-end; text-align: right; } .rduel .rd-side .pp canvas { width: 72px; height: 72px; border: 2px solid #7a5c33; display: block; } .rduel .rd-side .info { flex: 1; max-width: 360px; } .rduel .rd-side .nm { font-weight: 800; font-size: 19px; } .rduel .rd-side .nm small { font-weight: 400; color: var(--ink-soft); } .rduel .bar { position: relative; height: 18px; line-height: 18px; font-size: 12px; background: rgba(40,24,10,.25); border: 1px solid rgba(90,65,35,.5); margin-top: 3px; } .rduel .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #c0503a, #7a2a1e); transition: width .25s; } .rduel .rd-side.en .bar i { left: auto; right: 0; } .rduel .bar.sp i { background: linear-gradient(180deg, #e8c060, #a87a20); } /* 글자는 막대 안에 따로 띄운다 — 글꼴(본명조·고딕 등)마다 줄 높이가 달라 막대 밖으로 밀려 잘리던 것 (2026-10-19) */ .rduel .bar b { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; font-weight: 700; padding: 0 6px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; line-height: 1; white-space: nowrap; } .rduel .rd-side.en .bar b { justify-content: flex-end; } .rduel .rd-side .sub { font-size: 13px; color: var(--ink-soft); margin-top: 3px; } .rduel .rd-mid { text-align: center; } .rduel .rd-round { font-family: var(--latin); font-size: 22px; color: #7a2a1e; letter-spacing: .08em; } .rduel .rd-rps { font-size: 14px; color: var(--ink-soft); } .rduel .rd-rps span { color: #7a2a1e; font-weight: 800; } .rduel .rd-rps small { display: block; font-size: 12px; } .rduel .rd-stage { position: relative; } .rduel .rd-stage canvas { width: 100%; height: auto; display: block; border: 2px solid #7a5c33; box-shadow: 0 0 0 1px #2a1f16; } .rduel .rd-motion { position: absolute; bottom: 13.9%; width: 40.75%; height: auto; opacity: 0; pointer-events: none; z-index: 2; image-rendering: auto; } .rduel .rd-motion.me { left: 19.3%; } .rduel .rd-motion.en { right: 19.3%; transform: scaleX(-1); } .rduel .rd-motion.show { opacity: 1; } .rduel .rd-stage { overflow: hidden; } /* 전면 필살기 컷인: GIF 안에서 준비 → 당기기 → 돌진 → 타격 → 회수의 다섯 동작을 재생한다. CSS는 첫 장면을 화면 방향에 맞춰 짧게 열어 주고, 별도 섬광 띠만 더한다. 나는 왼쪽에서, 적은 오른쪽에서 들어온다. flip: 원화가 상대 반대쪽을 보면 좌우를 뒤집는다 (js/data/duelart.js cutinFaceLeft) from-r: 그림 기준 오른쪽부터 드러낸다 (뒤집힌 그림은 기준이 바뀌므로 JS가 정해 준다) */ .rduel .rd-motion.cutin { inset: 0; left: 0; right: auto; bottom: auto; width: 100%; height: 100%; object-fit: cover; transform: none; --c0: inset(0 100% 0 0); } .rduel .rd-motion.cutin.flip { transform: scaleX(-1); } .rduel .rd-motion.cutin.from-r { --c0: inset(0 0 0 100%); } .rduel .rd-motion.cutin.show { animation: rdCutIn .9s linear both; } @keyframes rdCutIn { 0% { clip-path: var(--c0); filter: brightness(.55) contrast(1.25); } 15% { clip-path: inset(0 0 0 0); filter: brightness(.82) contrast(1.08); } 22%, 100% { clip-path: inset(0 0 0 0); filter: none; } } .rduel .rd-cut-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(112deg, transparent 38%, rgba(255,236,190,.35) 45%, rgba(255,250,228,.95) 50%, rgba(255,236,190,.35) 55%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 100% 0; } .rduel .rd-cut-flash.en { transform: scaleX(-1); } .rduel .rd-cut-flash.show { animation: rdCutFlash .86s linear both; } @keyframes rdCutFlash { 0%, 46% { opacity: 0; background-position: 100% 0; } 52% { opacity: 1; } 72% { opacity: .85; } 80%, 100% { opacity: 0; background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .rduel .rd-motion.cutin.show, .rduel .rd-cut-flash.show { animation: none; } } .rduel .rd-cut-title { position: absolute; left: 3.2%; bottom: 7%; z-index: 3; display: flex; flex-direction: column; opacity: 0; transform: translateX(-16px); transition: opacity .12s, transform .18s; pointer-events: none; } .rduel .rd-cut-title.en { left: auto; right: 3.2%; align-items: flex-end; transform: translateX(16px); } .rduel .rd-cut-title.show { opacity: 1; transform: translateX(0); transition-delay: .12s; } .rduel .rd-cut-title b { color: #fff0ba; font-size: clamp(20px, 3.2vw, 34px); line-height: 1; letter-spacing: .08em; text-shadow: 0 3px 0 #5a2415, 0 0 12px #000, 0 0 28px rgba(255,190,70,.7); } .rduel .rd-cut-title small { margin-top: 7px; color: #f4e5c5; font-family: var(--latin); font-size: clamp(12px, 1.5vw, 15px); letter-spacing: .12em; text-shadow: 0 2px 4px #000; } .rduel .rd-stance { position: absolute; inset: 0; z-index: 3; background: rgba(20,12,6,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; } .rduel .rd-stance.gone { display: none; } .rduel .rd-stance .st-h { color: #ffe08a; font-size: 26px; font-weight: 800; letter-spacing: .06em; } .rduel .rd-stance .st-cmp { color: #f2e7cc; font-size: 15px; text-align: center; line-height: 1.6; } .rduel .rd-stance .st-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; } .rduel .st-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px 12px; height: auto; white-space: normal; line-height: 1.35; } .rduel .st-btn b { font-size: 18px; } .rduel .st-btn small { font-size: 12px; opacity: .8; font-style: italic; } .rduel .st-btn span { font-size: 13px; opacity: .92; } .rduel .rd-log { min-height: 48px; font-size: 16px; line-height: 1.5; } .rduel .rd-log .old { color: var(--ink-soft); font-size: 14px; } .rduel .rd-ctrl { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; } .rduel .rd-ctrl.done { opacity: .5; pointer-events: none; } .rduel .rd-ctrl .lbl { font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; } .rduel .rd-ctrl .lbl .intent { color: var(--ink); } .rduel .rd-moves .row { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; } .rduel .rd-moves .btn small { opacity: .75; margin-left: 2px; font-size: 11px; } .rduel .rd-moves .btn small.en { font-style: italic; } .rduel .rd-moves .btn.on, .rduel .rd-techs .btn.on, .rduel .rd-sys .btn.on { box-shadow: 0 0 0 3px var(--gold); } .rduel .rd-moves .btn.good { border-color: #6aa84a; } .rduel .rd-techs .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .rduel .rd-techs .btn.tech { padding: 4px 4px; font-size: 14px; position: relative; justify-content: center; white-space: nowrap; letter-spacing: -.02em; } .rduel .rd-techs .btn.tech small { font-size: 11px; opacity: .8; margin-left: 3px; } .rduel .rd-techs .btn.tech i { font-style: normal; font-size: 11px; margin-left: 4px; color: #e8c060; } .rduel .rd-sys { display: flex; flex-direction: column; gap: 5px; } /* 시세 창 */ .qbar { display: inline-block; width: 150px; height: 10px; background: rgba(90,60,30,.15); border-radius: 5px; overflow: hidden; vertical-align: middle; } .qbar > span { display: block; height: 100%; border-radius: 5px; } .tbl.quotes td, .tbl.quotes th { padding: 3px 6px; } .chip { display: inline-block; padding: 1px 8px; margin: 2px 2px; border-radius: 10px; background: rgba(90,60,30,.12); font-size: 14px; } /* 보급 창 */ .tbl.supply td { white-space: nowrap; vertical-align: middle; } .tbl.supply td:first-child { white-space: normal; max-width: 240px; } .tbl.supply input[type=range] { width: 220px !important; vertical-align: middle; } .pf-body td { white-space: nowrap; } /* 화면 위 쪽지 (도서관: 이야기하는 동안 읽은 책과 얻은 단서) */ .pinnote { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 75; max-width: 980px; padding: 10px 20px; font-size: 17px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0,0,0,.5); pointer-events: none; } .pinnote .pn-g { margin-top: 2px; } /* 유적·자연 경관·동물·보물 발견 연출 (SC.discoveryReveal) */ .reveal { position: absolute; inset: 0; z-index: 55; pointer-events: auto; cursor: pointer; } .reveal .rv-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(10,6,2,calc(var(--rv-dim) * .8)) 0%, rgba(4,2,1,var(--rv-dim)) 65%); opacity: 0; transition: opacity var(--rv-dim-ms) ease; } .reveal .rv-rays { position: absolute; left: 50%; top: 40%; width: 1700px; height: 1700px; margin: -850px 0 0 -850px; opacity: 0; transition: opacity 1.6s ease .3s; background: repeating-conic-gradient(from 0deg, rgba(255,214,140,.10) 0deg 6deg, rgba(255,214,140,0) 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%); mask: radial-gradient(circle, #000 0%, transparent 62%); animation: rvSpin 60s linear infinite; } .reveal .rv-frame { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.92); opacity: 0; border: 3px solid #d9b56a; border-radius: 4px; overflow: hidden; background: #140c06; box-shadow: 0 0 0 1px #3a2412, 0 0 38px 8px rgba(255,208,120,.55), 0 0 120px 30px rgba(255,190,90,.25); transition: opacity .9s ease .25s, transform 1.2s cubic-bezier(.2,.8,.2,1) .25s, top .8s ease; } .reveal .rv-frame img, .reveal .rv-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; } .reveal .rv-end { opacity: 0; transition: opacity .35s ease; } .reveal .rv-title { position: absolute; left: 0; right: 0; top: 78%; text-align: center; font-size: 86px; font-weight: 900; letter-spacing: .08em; color: #fff4d6; opacity: 0; transform: scale(1.35); filter: blur(10px); text-shadow: 0 0 12px rgba(255,220,140,.95), 0 0 36px rgba(255,190,80,.8), 0 0 80px rgba(255,160,40,.55), 0 4px 0 #6a3a10; transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.9,.25,1.15), filter .9s ease, top .8s ease, font-size .8s ease; pointer-events: none; } .reveal .rv-title b { background: linear-gradient(180deg, #fffdf2 0%, #ffe2a0 40%, #f0a93c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: none; filter: drop-shadow(0 0 10px rgba(255,214,130,.95)) drop-shadow(0 0 34px rgba(255,170,60,.7)) drop-shadow(0 3px 0 #6a3a10); } .reveal .rv-skip { position: absolute; right: 30px; bottom: 22px; font-size: 15px; color: rgba(242,231,204,.55); letter-spacing: .06em; transition: opacity .4s; } .reveal.on .rv-dim, .reveal.on .rv-rays { opacity: 1; } .reveal.on .rv-frame { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: rvGlow 3.2s ease-in-out 1.2s infinite; } .reveal.ended .rv-end { opacity: 1; } .reveal.titled .rv-title { opacity: 1; transform: scale(1); filter: blur(0); animation: rvTitle 2.6s ease-in-out 1.1s infinite; } .reveal.titled .rv-skip { opacity: 0; } .reveal.talk { cursor: default; } .reveal.talk .rv-frame { top: 27%; transform: translate(-50%, -50%) scale(.66); } .reveal.talk .rv-title { top: 47%; font-size: 58px; } .reveal.out { opacity: 0; transition: opacity .45s ease; } /* 발견 뒤 대화하는 동안: 알림은 그림(가운데 위)을 가리지 않게 오른쪽 위로 */ #ui:has(> .reveal.talk:not(.report)) > .toasts { left: auto; right: 16px; transform: none; align-items: flex-end; } #ui:has(> .reveal.talk:not(.report)) > .toasts .toast { max-width: 380px; font-size: 16px; padding: 8px 14px 8px 10px; } /* 보고·발표 자리에서 다시 띄우는 발견물 그림 (SC.discoveryShow · js/systems/pitch.js): 빛줄기 없이, 대화창 위쪽에 작게 */ .reveal.report { cursor: default; pointer-events: none; z-index: 12; } /* 대화하는 사람들(.dlg-actors z 13) 뒤 — 그림을 사이에 두고 선다 */ .reveal.report .rv-frame { animation: none !important; } .reveal.report.talk .rv-frame { top: 25%; transform: translate(-50%, -50%) scale(.6); } .reveal.report.talk .rv-title, .reveal.report.titled .rv-title { top: 38%; left: 0; right: 0; width: fit-content; margin: 0 auto; padding: 2px 20px 4px; font-size: 30px; letter-spacing: .06em; transform: none; filter: none; animation: none; background: rgba(18,11,6,.72); border: 1px solid rgba(217,181,106,.55); border-radius: 4px; } /* 그림 아래 띠 — 두 사람 머리 사이 */ /* 보고·발표 자리: 그림·제목은 대화하는 사람들 위 층(.rv-top) — 자리는 js/scenes/common.js discoveryShow의 place가 얼굴을 피해 이름표 10px 위에 잡는다 */ .reveal.rv-top { pointer-events: none; z-index: 14; } .reveal.rv-top .rv-frame { box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 0 1px #2a1f16; } .reveal.rv-top.unplaced .rv-frame, .reveal.rv-top.unplaced .rv-title { opacity: 0 !important; } /* 보물: 불 꺼진 전시실에서 큐레이터 조명이 유리·금속을 훑고 프리즘 섬광이 지나간다. */ .reveal.treasure .rv-dim { background: radial-gradient(ellipse at 50% 42%, rgba(5,7,14,calc(var(--rv-dim) * .72)) 0%, rgba(0,0,3,var(--rv-dim)) 62%, rgba(0,0,0,.96) 100%); } .reveal.treasure .rv-rays { background: repeating-conic-gradient(from 18deg, rgba(255,238,186,.12) 0deg 3deg, rgba(118,190,255,.055) 3deg 6deg, transparent 6deg 19deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 58%); mask: radial-gradient(circle, #000 0%, transparent 58%); } .reveal.treasure .rv-frame { border-color: #f5d995; background: #010207; box-shadow: 0 0 0 1px #5b431e, 0 0 34px 8px rgba(255,231,170,.72), 0 0 115px 34px rgba(92,158,255,.20); } .reveal.treasure .rv-frame img, .reveal.treasure .rv-frame canvas { z-index: 1; } .reveal.treasure .rv-frame::before, .reveal.treasure .rv-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; } .reveal.treasure .rv-frame::before { background: radial-gradient(ellipse 28% 72% at 50% -6%, rgba(255,244,214,.34), rgba(255,207,121,.10) 45%, transparent 72%); opacity: .72; animation: rvTreasureSpot 3.2s ease-in-out infinite; } .reveal.treasure .rv-frame::after { z-index: 3; left: -58%; right: 58%; width: 100%; background: linear-gradient(105deg, transparent 30%, rgba(104,186,255,.13) 43%, rgba(255,255,248,.72) 49.5%, rgba(255,212,125,.19) 55%, transparent 69%); filter: blur(1px); opacity: 0; } .reveal.treasure.on .rv-frame { animation: rvTreasureGlow 1.8s ease-in-out 1s infinite; } .reveal.treasure.on .rv-frame::after { animation: rvTreasureSweep 2.1s ease-in-out .55s 4; } .reveal.treasure .rv-title b { background: linear-gradient(180deg, #fff 0%, #fff0bd 34%, #ffd66d 66%, #a9d8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,255,238,1)) drop-shadow(0 0 38px rgba(255,195,72,.85)) drop-shadow(0 0 70px rgba(100,180,255,.48)); } @keyframes rvGlow { 0%, 100% { box-shadow: 0 0 0 1px #3a2412, 0 0 38px 8px rgba(255,208,120,.55), 0 0 120px 30px rgba(255,190,90,.25); } 50% { box-shadow: 0 0 0 1px #3a2412, 0 0 54px 14px rgba(255,220,140,.8), 0 0 170px 50px rgba(255,190,90,.38); } } @keyframes rvTitle { 0%, 100% { text-shadow: 0 0 12px rgba(255,220,140,.95), 0 0 36px rgba(255,190,80,.8), 0 0 80px rgba(255,160,40,.55), 0 4px 0 #6a3a10; } 50% { text-shadow: 0 0 18px rgba(255,236,180,1), 0 0 52px rgba(255,200,100,.95), 0 0 120px rgba(255,170,60,.7), 0 4px 0 #6a3a10; } } @keyframes rvSpin { to { transform: rotate(360deg); } } @keyframes rvTreasureGlow { 0%, 100% { box-shadow: 0 0 0 1px #5b431e, 0 0 34px 8px rgba(255,231,170,.72), 0 0 115px 34px rgba(92,158,255,.20); } 50% { box-shadow: 0 0 0 1px #8a6c35, 0 0 58px 16px rgba(255,248,218,.95), 0 0 170px 50px rgba(78,153,255,.34); } } @keyframes rvTreasureSpot { 0%, 100% { transform: translateX(-9%) rotate(-2deg); opacity: .52; } 50% { transform: translateX(9%) rotate(2deg); opacity: .82; } } @keyframes rvTreasureSweep { 0%, 18% { transform: translateX(-55%); opacity: 0; } 42%, 58% { opacity: .76; } 82%, 100% { transform: translateX(215%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .reveal.treasure .rv-frame::before, .reveal.treasure.on .rv-frame::after { animation: none; } } /* 실존 인물 이야기 (js/ui/bio.js) */ .has-bio { cursor: pointer; } .dlg .name.has-bio::after, .dlg-stage .actor-name.has-bio::after { content: ' 📜'; font-size: 13px; opacity: .85; } .dlg .name.has-bio:hover, .dlg-stage .actor-name.has-bio:hover { filter: brightness(1.25); } .biolink { cursor: pointer; margin-left: 6px; font-size: 15px; opacity: .85; } .biolink:hover { opacity: 1; filter: drop-shadow(0 0 3px #e8c060); } .biobox { display: flex; gap: 22px; align-items: flex-start; padding: 6px 4px; } .biobox .bio-face canvas { width: 180px; height: 180px; border: 3px solid #6a4a22; border-radius: 6px; } .biobox .bio-text { flex: 1; font-size: 17px; line-height: 1.75; } .biobox .bio-name { font-size: 22px; font-weight: bold; color: #5a2e0c; margin-bottom: 6px; } .biobox .small { font-size: 14px; } .mc-head .nm .biolink { font-size: 16px; } /* 신기루 (js/systems/mirage.js): 아직 세워지지 않은 발견물이 일렁이며 떠올랐다 흩어진다 */ .mirage { position: absolute; left: 50%; top: 38%; width: 760px; transform: translate(-50%, -50%); z-index: 55; pointer-events: none; text-align: center; animation: mirageLife var(--mirage-ms, 7000ms) ease-in-out forwards; } .mirage-pic { position: relative; height: 330px; -webkit-mask-image: radial-gradient(ellipse 50% 48% at 50% 52%, #000 38%, transparent 72%); mask-image: radial-gradient(ellipse 50% 48% at 50% 52%, #000 38%, transparent 72%); animation: mirageWave 2.4s ease-in-out infinite; } .mirage-pic img, .mirage-pic canvas { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.35) saturate(.75) brightness(1.18) contrast(.85) blur(1.2px); mix-blend-mode: screen; } .mirage-pic::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,240,210,.10) 0 3px, rgba(255,240,210,0) 3px 9px); animation: mirageHeat 1.1s linear infinite; } .mirage-pic.mirage-exterior { -webkit-mask-image: none; mask-image: none; } .mirage-pic.mirage-exterior img { object-fit: contain; } .mirage-pic.mirage-exterior::after { display: none; } .mirage-cap { display: inline-block; margin-top: -10px; padding: 8px 22px 10px; border-radius: 22px; background: radial-gradient(ellipse at center, rgba(20,12,4,.62), rgba(20,12,4,.18) 70%, transparent); font-size: 22px; color: #fff1cf; letter-spacing: .08em; text-shadow: 0 0 10px rgba(255,210,140,.9), 0 2px 6px rgba(0,0,0,.9); } .mirage-cap b { font-family: var(--latin, serif); letter-spacing: .3em; color: #ffe1a0; } .mirage-cap small { display: block; font-size: 15px; margin-top: 4px; opacity: .9; letter-spacing: .02em; } @keyframes mirageLife { 0% { opacity: 0; filter: blur(10px); transform: translate(-50%, -46%) scale(.96); } 22% { opacity: .82; filter: blur(0); } 62% { opacity: .78; filter: blur(.5px); transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; filter: blur(14px); transform: translate(-50%, -56%) scale(1.04) skewX(3deg); } } @keyframes mirageWave { 0%, 100% { transform: skewX(0) scaleY(1); } 25% { transform: skewX(1.6deg) scaleY(1.02); } 50% { transform: skewX(-1.2deg) scaleY(.985); } 75% { transform: skewX(.8deg) scaleY(1.015); } } @keyframes mirageHeat { from { background-position: 0 0; } to { background-position: 0 -18px; } } @media (prefers-reduced-motion: reduce) { .mirage-pic, .mirage-pic::after { animation: none; } } /* 항해 중의 소식 (js/ui/seanews.js) — 화면 가운데를 가리지 않고 오른쪽 위에 잠깐 */ .sea-news { position: absolute; right: 18px; top: 66px; width: 380px; z-index: 19; padding: 8px 12px 10px; cursor: pointer; opacity: .94; pointer-events: auto; animation: snIn .35s ease-out; } .sea-news.out { animation: snOut .45s ease-in forwards; } .sea-news .sn-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--brass-hi); letter-spacing: .06em; margin-bottom: 4px; } .sea-news .sn-head svg { width: 18px; height: 18px; } .sea-news .sn-x { margin-left: auto; color: var(--cream-dim); } .sea-news .sn-item { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--cream); padding: 4px 0; border-top: 1px solid rgba(184,146,90,.25); } .sea-news .sn-item svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--brass-hi); } .sea-news .sn-more { font-size: 13px; color: var(--cream-dim); padding-top: 4px; } @keyframes snIn { from { opacity: 0; transform: translateX(24px); } to { opacity: .94; transform: none; } } @keyframes snOut { to { opacity: 0; transform: translateX(24px); } } /* 항해 중에는 알림(토스트)을 작게, 세 개까지만 */ #ui.at-sea .toasts { gap: 5px; } #ui.at-sea .toast { min-width: 0; max-width: 440px; padding: 6px 12px 6px 10px; font-size: 15px; gap: 8px; opacity: .92; } #ui.at-sea .toast svg { width: 20px; height: 20px; flex: 0 0 20px; } #ui.at-sea .toasts .toast:nth-last-child(n+4) { display: none; } /* 제독 만들기: 특기 17가지와 어학 16가지를 스크롤 없이 한 화면에 — 세 칸으로 촘촘하게 */ .create .cr-skills { overflow: hidden; padding: 12px 16px; } .create .cr-skills h4 { margin-bottom: 6px; } .create .cr-skills .skillgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 12px; } .create .cr-skills .skillrow { grid-template-columns: minmax(0, 1fr) auto 25px 25px; gap: 3px; font-size: 16px; line-height: 1.15; } .create .cr-skills .skillrow > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; } .create .cr-skills .skillgrid + .sep, .create .cr-skills .sep { margin: 6px 0; } .create .cr-skills .pips { gap: 2px; } .create .cr-skills .pips i { width: 11px; height: 11px; } .create .cr-skills .mini { width: 25px; height: 25px; font-size: 14px; } .create .statrow { margin: 3px 0; } .create .statrow.cr-stat { grid-template-columns: 70px 1fr 64px 30px 30px; gap: 6px; } .create .statrow .cr-bon { font-size: 12px; color: #2e6a3a; margin-left: 2px; } .create .cr-bonus { margin-top: 8px; font-size: 14px; line-height: 1.5; } .create .cr-bonus b { color: var(--ink); } .create input[type=text] { min-width: 0; } /* 그림을 받는 동안 (js/core/images.js) — 코드 그림을 먼저 내보이지 않고 은은한 바탕으로 기다린다 */ canvas.img-wait { background: linear-gradient(100deg, rgba(60,44,28,.35) 30%, rgba(140,110,70,.28) 50%, rgba(60,44,28,.35) 70%); background-size: 220% 100%; animation: imgwait 1.4s linear infinite; } @keyframes imgwait { from { background-position: 120% 0; } to { background-position: -100% 0; } } .img-loading { position: absolute; right: 22px; bottom: 18px; z-index: 190; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 8px; background: rgba(20,14,9,.78); color: #e9dcc0; font-size: 16px; letter-spacing: .04em; pointer-events: none; } .img-loading i { width: 16px; height: 16px; border: 2px solid rgba(217,180,95,.35); border-top-color: #d9b45f; border-radius: 50%; animation: imgspin .8s linear infinite; } @keyframes imgspin { to { transform: rotate(360deg); } } /* 수첩: 아이와 제독의 사이 (family.js F.bondHearts) */ .kid-bond { color: #c0392b; font-size: 13px; letter-spacing: 1px; } /* 기함 선실 화면 (js/ui/cabinview.js) */ .cb-top { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-size: 17px; margin-bottom: 10px; } .cb-top .ic { width: 20px; height: 20px; vertical-align: -4px; margin-right: 5px; } .cb-top .cb-tip { font-size: 15px; } .cb-body { display: flex; gap: 18px; align-items: flex-start; } .cb-main { flex: none; } .cb-side { flex: 1; min-width: 0; } /* 무대: 배 단면 그림 + 갑판 얼굴표 + 선체 속 선실 표 */ .cb-stage { position: relative; overflow: hidden; background: #22170f; border: 2px solid #3b2313; box-shadow: 0 0 0 1px rgba(211,174,96,.55), 0 4px 14px rgba(0,0,0,.4); } .cb-stage-base { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; transition: opacity .3s ease; } .cb-ship-art { position: absolute; max-width: none; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .cb-stage.art-ready .cb-ship-art { opacity: 1; } .cb-stage.art-ready .cb-stage-base { opacity: 0; } .cb-stage-shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 46px rgba(10,6,3,.55); background: linear-gradient(180deg, rgba(10,6,3,.12), rgba(10,6,3,0) 30%, rgba(10,6,3,0) 78%, rgba(10,6,3,.25)); } .cb-ship-name { position: absolute; z-index: 4; left: 14px; bottom: 10px; padding: 4px 12px 5px; color: #f4e4bd; background: rgba(24,15,9,.78); border: 1px solid rgba(211,174,96,.58); box-shadow: 0 2px 8px rgba(0,0,0,.48); font: 700 18px/1.1 serif; text-shadow: 0 1px 2px #000; pointer-events: none; } .cb-ship-name small { font-size: 14px; color: #d8c39a; } .cb-medal { position: absolute; z-index: 3; width: 104px; margin-left: -52px; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .cb-ring { box-sizing: border-box; border-radius: 50%; overflow: hidden; border: 3px solid #c99a4a; background: radial-gradient(circle at 50% 40%, #6b4a2a, #2a190e); box-shadow: 0 0 0 2px rgba(40,24,12,.85), 0 3px 10px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease; } .cb-ring canvas { width: 100%; height: 100%; display: block; } .cb-ring .ic { width: 52%; height: 52%; color: #e9d3a0; opacity: .8; } .cb-medal.empty .cb-ring { border-style: dashed; border-color: rgba(233,211,160,.75); background: rgba(30,18,10,.6); } .cb-plate { margin-top: -6px; padding: 2px 8px 3px; max-width: 104px; text-align: center; background: linear-gradient(180deg, rgba(48,29,15,.95), rgba(30,18,10,.95)); border: 1px solid rgba(211,174,96,.7); box-shadow: 0 2px 6px rgba(0,0,0,.5); color: #f5e5bd; text-shadow: 0 1px 2px #000; line-height: 1.15; position: relative; } .cb-plate b { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 13px; white-space: nowrap; } .cb-plate b .ic { width: 14px; height: 14px; } .cb-plate small { display: block; font-size: 11px; color: #e3c68d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-medal.empty .cb-plate small { color: #b9a988; } .cb-medal > .cb-pow { position: absolute; top: -4px; right: 18px; z-index: 2; margin: 0; } .cb-medal:hover .cb-ring { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(40,24,12,.85), 0 0 14px rgba(255,214,130,.75); } .cb-pin { position: absolute; z-index: 2; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; overflow: visible; cursor: pointer; border: 2px solid rgba(233,196,120,.85); background: rgba(28,16,8,.72); box-shadow: 0 0 0 1px rgba(20,12,6,.8), 0 0 10px rgba(255,190,90,.35); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease; } .cb-pin canvas { width: 100%; height: 100%; display: block; border-radius: 50%; } .cb-pin .ic { width: 56%; height: 56%; color: #f1dcaa; opacity: .85; } .cb-pin.on { border-color: #f0c766; } .cb-pin.hold { border-style: dashed; border-color: rgba(220,200,160,.55); background: rgba(28,16,8,.5); box-shadow: none; } .cb-pin.hold .ic { opacity: .5; } .cb-pin .cb-no { position: absolute; left: -6px; top: -6px; min-width: 13px; height: 13px; font-size: 9px; line-height: 13px; padding: 0 2px; } .cb-pin.hot, .cb-pin:hover { transform: translate(-50%, -50%) scale(1.3); z-index: 5; box-shadow: 0 0 0 2px rgba(20,12,6,.8), 0 0 16px rgba(255,214,130,.95); } .cb-no { min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; font: 700 10px/15px sans-serif; font-style: normal; text-align: center; color: #2a190e; background: #e9c675; box-shadow: 0 1px 2px rgba(0,0,0,.6); text-shadow: none; } /* 선실 카드 */ .cb-cards { display: grid; gap: 8px; margin-top: 10px; justify-content: center; } .cb-card { position: relative; height: 84px; box-sizing: border-box; cursor: pointer; overflow: hidden; color: #f2e1b9; background: #3b2415; border: 2px solid #4a2d17; box-shadow: inset 0 0 0 1px rgba(205,143,69,.45), 0 2px 5px rgba(0,0,0,.35); text-shadow: 0 1px 2px #160d08; display: flex; flex-direction: column; justify-content: space-between; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .cb-card > :not(.cb-card-art) { position: relative; z-index: 1; } .cb-card-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; filter: saturate(.85) brightness(.82); transition: opacity .15s ease, filter .15s ease, transform .3s ease; pointer-events: none; } .cb-card.on { border-color: #b98a3c; } .cb-card.hold { border-style: dashed; background: #2f1d12; } .cb-card.hold .cb-card-art { opacity: .5; filter: saturate(.4) brightness(.5); } .cb-card.hot, .cb-card:hover { border-color: #e2b45c; box-shadow: inset 0 0 0 1px rgba(255,232,177,.5), 0 0 0 2px rgba(226,180,92,.3), 0 4px 10px rgba(0,0,0,.45); transform: translateY(-2px); } .cb-card.hot .cb-card-art, .cb-card:hover .cb-card-art { opacity: 1; filter: saturate(1) brightness(.95); transform: scale(1.04); } .cb-h { display: flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 5px; font-size: 14px; white-space: nowrap; color: #f5e5bd; background: linear-gradient(90deg, rgba(31,18,10,.92), rgba(47,28,14,.55)); border-bottom: 1px solid rgba(208,148,73,.45); } .cb-h b { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cb-h .ic { width: 16px; height: 16px; flex: none; } .cb-pow { margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #2f5b8c; border-radius: 9px; padding: 0 6px; line-height: 17px; text-shadow: none; } .cb-who { display: flex; align-items: center; gap: 5px; margin: 0 4px 4px; padding: 2px 4px; background: rgba(240,224,188,.88); color: #281a0f; text-shadow: 0 1px 1px rgba(255,255,255,.5); } .cb-face { width: 34px; height: 34px; flex: none; border: 1px solid rgba(60,40,20,.6); background: rgba(0,0,0,.12); overflow: hidden; } .cb-face canvas { position: static; width: 100%; height: 100%; display: block; } .cb-face .ic { width: 100%; height: 100%; opacity: .6; } .cb-nm { display: flex; flex-direction: column; font-size: 13px; line-height: 1.2; overflow: hidden; min-width: 0; } .cb-nm .n1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-nm small { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-card .cb-nm small { color: #2f5b8c; font-weight: 700; } .cb-none { margin: 0 5px 5px; padding: 2px 4px; font-size: 12px; text-align: center; color: #f4e6c4; background: rgba(29,17,10,.66); } /* 오른쪽: 명단과 힘을 내는 방 */ .cb-sub { margin: 0 0 6px; font-size: 18px; font-weight: 700; } .cb-side .cb-sub + .cb-fx, .cb-side .cb-sub + .muted { margin-bottom: 4px; } .cb-note + .cb-sub { margin-top: 12px; } .cb-sub small { font-weight: 400; font-size: 14px; } .cb-roster { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; padding: 2px 4px 2px 2px; min-height: 60px; border: 1px dashed transparent; } .cb-mate { display: flex; align-items: center; gap: 7px; padding: 3px 8px 3px 3px; cursor: pointer; border: 1px solid rgba(110,80,40,.45); background: rgba(255,250,236,.55); } .cb-mate:hover { background: rgba(255,246,214,.95); border-color: #b8862f; } .cb-mate.idle { border-style: dashed; border-color: rgba(176,74,47,.6); background: rgba(232,205,170,.5); } .cb-mate .cb-face { width: 40px; height: 40px; } .cb-mate .cb-nm { font-size: 14px; } .cb-loyal { font-size: 12px; color: var(--ink-soft); } .cb-loyal.low { color: var(--warn); font-weight: 700; } .cb-note { margin-top: 8px; font-size: 13px; line-height: 1.45; } .cb-fx { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; max-height: 136px; overflow-y: auto; } .cb-fx .cb-pow { margin: 0 4px; } /* 끌어다 놓기 */ .cb-mate[draggable=true], .cb-card[draggable=true], .cb-pin[draggable=true], .cb-medal[draggable=true] { cursor: grab; } .cb-dragging .cb-card:not(.hold), .cb-dragging .cb-pin:not(.hold), .cb-dragging .cb-medal .cb-ring { outline: 2px dashed rgba(240,200,110,.65); outline-offset: 1px; } .cb-dragging .cb-roster { border-color: rgba(110,80,40,.5); } .drop-ok.cb-card, .drop-ok.cb-pin, .drop-ok .cb-ring { box-shadow: 0 0 0 3px #f0c766, 0 0 18px rgba(255,214,130,.95) !important; } .drop-ok.cb-roster { background: rgba(240,199,102,.18); } .shipcard .pips { display: inline-flex; vertical-align: -2px; } /* 자택 장면 그림 (js/art/homeart.js) — 대화하는 사람 뒤에 걸리는 액자 */ /* 내 MP3로 트는 코스타 델 솔 곡 이름 (js/systems/localost.js) — 곡이 바뀔 때 왼쪽 아래에 잠깐 */ .ost-now { position: absolute; left: 24px; bottom: 74px; z-index: 95; pointer-events: none; padding: 5px 14px; font-size: 15px; letter-spacing: .04em; color: var(--cream); background: linear-gradient(90deg, rgba(20,14,8,.82), rgba(20,14,8,0)); border-left: 2px solid var(--brass); opacity: 0; transform: translateX(-10px); transition: opacity .6s ease, transform .6s ease; } .ost-now.on { opacity: .92; transform: none; } /* 가족 사건 그림 (js/systems/familyevent.js) — 대화창 위에 576×256 그림을 크게, 천천히 다가간다 */ .famscene { position: absolute; z-index: 12; padding: 10px; pointer-events: none !important; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; } .famscene.on { opacity: 1; transform: none; } .famscene .fs-clip { overflow: hidden; border: 1px solid #0c0806; box-shadow: inset 0 0 0 1px rgba(227,198,141,.2); } .famscene img { display: block; object-fit: cover; transform-origin: 50% 55%; animation: famscene-drift 18s ease-out forwards; } @keyframes famscene-drift { from { transform: scale(1); } to { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .famscene img { animation: none; } } .homeart { position: absolute; z-index: 12; padding: 10px; pointer-events: none !important; opacity: 0; transition: opacity .26s ease; } .homeart.on { opacity: 1; } .homeart canvas { display: block; border: 1px solid #0c0806; box-shadow: inset 0 0 0 1px rgba(227,198,141,.2); } #ui.homeart-on .cmdmenu, #ui.homeart-on .todo, #ui.homeart-on .city-banner, #ui.homeart-on .fleetpanel { visibility: hidden; } /* 자택에 서 있는 가족 (js/systems/homelife.js familyPanel) */ .home-family { position: absolute; z-index: 12; display: flex; align-items: flex-end; justify-content: center; pointer-events: none !important; } .home-family .hf-one { position: relative; flex: none; cursor: pointer; pointer-events: auto; transform-origin: 50% 100%; animation: hfbreath 5.5s ease-in-out infinite; transition: filter .15s; } .home-family .hf-one canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); pointer-events: none; } .home-family .hf-one.bust { align-self: flex-end; width: 200px !important; height: 240px !important; } .home-family .hf-one.bust canvas { height: 200px; border: 3px solid #4a3220; } .home-family .hf-one:hover { filter: brightness(1.12); z-index: 20 !important; } .home-family .hf-name { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 3px 12px; white-space: nowrap; font-size: 16px; color: var(--cream); text-align: center; opacity: .92; } .home-family .hf-name small { display: block; font-size: 12px; opacity: .85; } .home-family .hf-one:hover .hf-name { opacity: 1; outline: 1px solid #b8862f; } @keyframes hfbreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.006); } } #ui.talking .home-family, #ui.homeart-on .home-family { visibility: hidden; } /* 명성의 네 갈래 (수첩 제독 쪽) */ .famebars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; } .famebar { display: grid; grid-template-columns: 44px 1fr 64px; align-items: center; gap: 8px; font-size: 16px; } .famebar .fb { height: 9px; background: rgba(60,40,20,.18); border: 1px solid rgba(110,80,40,.45); } .famebar .fb i { display: block; height: 100%; background: linear-gradient(#d9b45a, #a8782a); } .famebar b { text-align: right; font-variant-numeric: tabular-nums; } /* 자연재해 (js/art/disasterfx.js): 지진 때 지도·바다 화면이 흔들린다 */ /* 지진·해일 흔들림은 CSS로 화면 요소를 옮기지 않는다 — 탐험·항해 화면이 그릴 때 카메라만 옮긴다 (js/art/quakefx.js) */ /* 해전 함대 명령판 (js/scenes/battle.js — 기함을 뺀 배들에게 학익진·일제 공격·포격전·호위…) */ .ordpanel { position: absolute; right: 18px; top: 66px; width: 336px; padding: 10px 12px; z-index: 14; font-size: 14px; color: var(--cream); } .ordpanel .fp-h { display: flex; gap: 6px; align-items: center; color: var(--brass-hi); font-size: 16px; margin-bottom: 7px; flex-wrap: wrap; } .ordpanel .fp-h small { font-size: 12.5px; } .ord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .ord-btn { justify-content: flex-start; white-space: nowrap; font-size: 13.5px; min-height: 32px; padding: 4px 8px; gap: 5px; position: relative; } .ord-btn.on { background: linear-gradient(#b8892e, #7d5918); color: #fff6dc; box-shadow: inset 0 0 0 1px #ffe2a0; } .ord-key { display: inline-block; min-width: 16px; padding: 0 3px; margin-right: 2px; border-radius: 3px; background: rgba(0,0,0,.35); color: #ffe7b0; font-size: 11px; text-align: center; } .ord-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; } .ord-row { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border-radius: 4px; cursor: pointer; background: rgba(0,0,0,.18); } .ord-row:hover { background: rgba(255,230,170,.12); } .ord-row.sel { background: rgba(255,214,120,.25); box-shadow: inset 0 0 0 1px rgba(255,230,170,.7); } .ord-row.gone { opacity: .45; cursor: default; } .ord-row .right { margin-left: auto; color: #ffd98a; font-size: 13px; } .ord-row .shipno { width: 20px; height: 20px; line-height: 20px; font-size: 12px; } .ord-hint { font-size: 12.5px; margin-top: 6px; line-height: 1.45; } .ordpanel .ord-btn.off { opacity: .38; filter: grayscale(.8); } /* 기함 혼자일 때 학익진·호위 */ .ordpanel.solo .ord-list:empty { display: none; } /* 시대 수요 (js/systems/era.js): 교역소 꼬리표·수첩 교역 */ .tag.era-up { background: #2f6b3a; color: #eaf7e4; } .tag.era-down { background: #7a4a3a; color: #fbe9e2; } .era-box { margin: 0 0 12px; padding: 8px 10px; border: 1px solid rgba(90,65,35,.25); border-radius: 6px; background: rgba(255,250,235,.45); font-size: 15px; } .era-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .era-lbl { font-weight: 700; min-width: 76px; } .era-lbl.up { color: #2f6b3a; } .era-lbl.down { color: #8a3a2a; } .era-lbl.soon { color: #6a5418; } .era-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 12px; background: rgba(90,65,35,.08); cursor: help; } .era-chip.up { box-shadow: inset 0 0 0 1px rgba(47,107,58,.35); } .era-chip.down { box-shadow: inset 0 0 0 1px rgba(138,58,42,.35); } .era-chip.soon { box-shadow: inset 0 0 0 1px rgba(106,84,24,.35); } .era-chip small { color: #6a5a40; } /* 살아 있는 경제 (js/systems/economy.js): 세상의 시장 사건 ▲▼ · 특산 · 귀함 · 산지 */ .tag.ev-up { background: #9a3a22; color: #fbe8dc; cursor: help; } .tag.ev-down { background: #2a5f7a; color: #e2f2fb; cursor: help; } .tag.spec { background: #5a6a2a; color: #f1f5dc; cursor: help; } .tag.rare { background: #7a4a8a; color: #f6e8fb; cursor: help; } .tag.cheap { background: #7a6a5a; color: #f3ebe0; cursor: help; } .econ-box { margin: 0 0 12px; padding: 8px 10px; border: 1px solid rgba(154,58,34,.3); border-radius: 6px; background: rgba(255,244,230,.5); font-size: 15px; } .econ-row .era-lbl { min-width: 200px; cursor: help; } @keyframes dzshake { 0% { transform: translate(0, 0); } 25% { transform: translate(-7px, 3px); } 50% { transform: translate(5px, -4px); } 75% { transform: translate(-4px, -2px); } 100% { transform: translate(0, 0); } } #stage.dz-shake #world, #stage.dz-shake #overlay, #stage.dz-shake #scene { animation: dzshake .11s linear infinite; } /* 튜토리얼 「첫 항해」 — 안내 상자와 빛나는 단추 (js/systems/tutorial.js) */ .tutbox { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); width: 680px; max-width: 62%; z-index: 62; pointer-events: auto; padding: 9px 16px 10px; border: 2px solid #7a5a2e; box-shadow: 0 6px 22px rgba(0,0,0,.45); font-size: 16px; line-height: 1.5; color: var(--ink, #2b2118); } .tutbox .tb-h { display: flex; align-items: baseline; gap: 10px; font-size: 16px; } /* 대화 중(무릎상이 서 있을 때)에는 얼굴을 가리지 않게 왼쪽 위 도시 이름판 자리로 비켜 작게(그동안 이름판은 숨김) — 대화가 끝나면 다시 가운데 위로 */ #ui.talking.tut-on .city-banner, #ui.talking.tut-on .status-strip { visibility: hidden; } #ui.talking .tutbox { left: 22px; top: 96px; transform: none; width: 340px; max-width: 340px; padding: 7px 12px 8px; font-size: 14px; line-height: 1.45; opacity: .95; transition: opacity .2s; } #ui.talking .tutbox .tb-h { flex-wrap: wrap; gap: 4px 8px; font-size: 14px; } #ui.talking .tutbox .tb-h b { font-size: 15px; } #ui.talking .tutbox .tb-btns { margin-left: 0; width: 100%; gap: 2px 10px; flex-wrap: wrap; } /* 「로코에게 키를 맡긴다」까지 넷이면 340px 상자 밖으로 삐져나갔다 */ #ui.talking .tutbox .tb-g { font-size: 14px; } #ui.talking .tutbox .tb-g svg { width: 16px; height: 16px; margin-top: 2px; } #ui.talking.tut-on .toasts { top: 62px !important; } .tutbox .tb-h b { font-size: 18px; } .tutbox .tb-n { font-size: 13px; padding: 1px 8px; background: #1e3552; color: #f3e2bd; border-radius: 10px; white-space: nowrap; } .tutbox .tb-btns { margin-left: auto; display: flex; gap: 12px; white-space: nowrap; } .tutbox .tb-btns a { font-size: 13px; color: #6a4a2a; text-decoration: underline; cursor: pointer; } .tutbox .tb-btns a:hover { color: #1e3552; } .tutbox .tb-btns a[data-act=again] { color: #1e3552; font-weight: 700; } .tutbox .tb-btns a.tb-helm { color: #1e3552; font-weight: 700; font-size: 14px; } .tutbox .tb-g { display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; font-size: 18px; } .tutbox .tb-g svg { width: 20px; height: 20px; flex: none; margin-top: 3px; } /* 튜토리얼에서 눌러야 할 곳 — 키보드 커서(.kbd-focus, 노란빛)와 헷갈리지 않게 하늘빛 테두리와 「여기」 표 (QA 2026-10-16) 테두리는 안쪽에도 그려 목록이 잘라도 보이고, 키보드 커서가 같은 단추에 오면 안쪽에 노란 줄이 함께 보인다 */ .tut-glow { animation: tutglow 1.2s ease-in-out infinite; outline: 3px solid #2fc6ff !important; outline-offset: 1px; position: relative; z-index: 2; } @keyframes tutglow { 0%, 100% { box-shadow: inset 0 0 0 2px #2fc6ff, 0 0 5px 2px rgba(47,198,255,.55); } 50% { box-shadow: inset 0 0 0 2px #8fe4ff, 0 0 18px 7px rgba(47,198,255,.95); } } .tut-glow.kbd-focus { animation-name: tutglowk; } @keyframes tutglowk { 0%, 100% { box-shadow: inset 0 0 0 2px #2fc6ff, inset 0 0 0 5px #f0cf7b, 0 0 5px 2px rgba(47,198,255,.55); } 50% { box-shadow: inset 0 0 0 2px #8fe4ff, inset 0 0 0 5px #f0cf7b, 0 0 18px 7px rgba(47,198,255,.95); } } .cmd.tut-glow::after, .choice.tut-glow::after, .btn.tut-glow::after, .hire-row.tut-glow::after, .todo .tr.tut-glow::after { content: '여기'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 0 7px; font: 700 13px/20px var(--serif, serif); letter-spacing: 0; color: #04202e; background: #2fc6ff; border: 1px solid #0b3b52; border-radius: 10px; pointer-events: none; z-index: 3; box-shadow: 0 1px 3px rgba(0,0,0,.45); } .btn.tut-glow::after { top: -10px; right: -8px; transform: none; } /* 생일 선물 (js/systems/lifespan.js) */ .bday .bday-head { font-size: 18px; line-height: 1.6; margin-bottom: 10px; } .bday .bday-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; } .bday .bday-row { display: flex; gap: 12px; align-items: center; padding: 6px 8px; border: 1px solid rgba(122,92,51,.45); border-radius: 6px; background: rgba(255,248,230,.35); } .bday .bd-face { flex: 0 0 72px; height: 72px; overflow: hidden; border-radius: 4px; border: 1px solid #7a5c33; } .bday .bd-face canvas { width: 72px; height: 72px; display: block; } .bday .bd-body { flex: 1; font-size: 16px; line-height: 1.5; } .bday .bd-line { font-size: 16px; } .bday .bd-got { font-size: 15px; color: var(--ink-soft); } /* 토르데시야스·사라고사 조약 (js/systems/treaty.js) */ .treaty .tr-map canvas { width: 88%; margin-left: auto; margin-right: auto; height: auto; display: block; border: 2px solid #7a5c33; border-radius: 4px; margin-bottom: 10px; } .treaty .tr-text { font-size: 16px; line-height: 1.55; } .treaty .tr-text p { margin: 4px 0; } .treaty .tr-text ul { margin: 6px 0 8px 20px; padding: 0; } .treaty .tr-text li { margin: 3px 0; } .treaty .tr-rule { font-size: 15px; color: var(--ink-soft); } .treaty .tr-me { font-weight: 700; color: #5a2a14; } .tr-claim { font-weight: 700; } .tr-claim.es { color: #8a1c10; } .tr-claim.pt { color: #1f5a34; } /* 플레이 가이드북 (js/ui/guidebook.js) */ .win.gb-win { max-width: 1400px; max-height: 870px; } .win.gb-win .content { padding: 0 14px 6px; overflow: hidden; display: flex; min-height: 0; } .gb { display: flex; gap: 14px; flex: 1; min-height: 0; width: 100%; } .gb-nav { flex: 0 0 270px; overflow-y: auto; padding: 4px 6px 4px 2px; color: var(--cream); } .gb-ch { margin-bottom: 6px; border-radius: 6px; } .gb-ch > b { display: block; padding: 7px 10px; font-size: 17px; cursor: pointer; border-radius: 6px; color: var(--cream); } .gb-ch > b:hover { background: rgba(255,230,180,.12); } .gb-ch.on > b { background: rgba(240,192,64,.22); color: var(--brass-hi); box-shadow: inset 3px 0 0 var(--brass-hi); } .gb-secs { display: none; padding: 2px 0 4px 18px; } .gb-ch.on .gb-secs { display: block; } .gb-sec { font-size: 14.5px; padding: 3px 8px; cursor: pointer; color: var(--cream-dim); border-radius: 4px; } .gb-sec:hover { color: #fff; background: rgba(255,230,180,.1); } .gb-page { flex: 1; overflow-y: auto; padding: 18px 30px 30px; margin: 0; font-size: 17.5px; line-height: 1.75; position: relative; } .gb-page .gb-kicker { font-size: 13px; letter-spacing: .12em; color: var(--ink-soft); } .gb-page h2 { font-size: 30px; margin: 2px 0 14px; color: #3a2410; border-bottom: 2px solid rgba(122,92,51,.45); padding-bottom: 6px; } .gb-page h3 { font-size: 21px; margin: 26px 0 8px; color: #4a2e12; } .gb-page p { margin: 8px 0; } .gb-page ul, .gb-page ol { margin: 6px 0 10px; padding-left: 26px; } .gb-page li { margin: 3px 0; } .gb-page li.gb-task { list-style: none; margin-left: -22px; } .gb-page .gb-box { display: inline-block; width: 17px; height: 17px; border: 2px solid #7a5c33; border-radius: 3px; margin-right: 8px; vertical-align: -3px; text-align: center; font-size: 12px; line-height: 13px; } .gb-page a { color: #1e3552; } .gb-fig { margin: 14px 0 16px; text-align: center; } .gb-fig img { max-width: 100%; max-height: 520px; border: 3px solid #7a5c33; border-radius: 4px; box-shadow: 0 4px 14px rgba(40,24,8,.35); cursor: zoom-in; background: #2a1e12; min-height: 60px; } .gb-fig.wait img { min-height: 300px; min-width: 60%; } .gb-fig figcaption { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; } .gb-table { border-collapse: collapse; margin: 10px 0 14px; width: 100%; font-size: 16px; line-height: 1.5; } .gb-table th, .gb-table td { border: 1px solid rgba(122,92,51,.55); padding: 6px 10px; text-align: left; vertical-align: top; } .gb-table th { background: rgba(122,92,51,.18); } .gb-zoom { position: absolute; inset: 0; z-index: 9000; pointer-events: auto; background: rgba(8,6,4,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: zoom-out; } .gb-zoom img { max-width: 94%; max-height: 86%; border: 3px solid #b8a27a; box-shadow: 0 8px 30px rgba(0,0,0,.6); } .gb-zoom .gb-zcap { color: var(--cream); font-size: 17px; margin-top: 12px; } .help-guide { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 14px; border: 2px solid #b8a27a; border-radius: 8px; background: linear-gradient(90deg, rgba(240,192,64,.25), rgba(240,192,64,.06)); cursor: pointer; } .help-guide:hover { background: linear-gradient(90deg, rgba(240,192,64,.38), rgba(240,192,64,.1)); } .help-guide img { width: 168px; height: 95px; object-fit: cover; border: 2px solid #7a5c33; border-radius: 4px; flex: none; background: #2a1e12; } .help-guide .hg-t { font-size: 21px; font-weight: 700; color: #3a2410; } .help-guide .hg-s { font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; } /* 라틴 글자를 쓰는 유럽 말(에스파냐·포르투갈·로망스·게르만)을 못 알아들을 때: 기울인 낱말로 */ .dlg .foreign.lat_es, .dlg .foreign.lat_pt, .dlg .foreign.lat_rom, .dlg .foreign.lat_ger { font-style: italic; letter-spacing: .01em; } /* 대화 중의 알림: 가운데 위(인물 머리 자리)를 비우고 오른쪽 위에 작게 */ #ui.talking .toasts { left: auto; right: 22px; transform: none; align-items: flex-end; top: 62px; } #ui.talking .toast { max-width: 380px; min-width: 0; font-size: 15px; padding: 7px 12px 7px 10px; opacity: .93; } #ui.talking .toast svg { width: 22px; height: 22px; flex: 0 0 22px; } /* 결과 연출 (js/ui/outcome.js): 잠입·설득·청혼의 성공·실패 — 로딩 그림과 같은 부드러운 회화풍 */ .modal-back.oc-back { background: rgba(4,3,2,.72); cursor: pointer; } .win.oc-win { min-width: 0; background: none; border: 0; box-shadow: none; } .win.oc-win::before, .win.oc-win::after { display: none; } .win.oc-win .content { padding: 0; overflow: visible; background: none; } .oc-card { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: oc-in .28s ease-out; } .oc-pic { width: min(720px, calc(100vw - 32px)); aspect-ratio: 8 / 5; border: 4px solid #2a1c12; outline: 2px solid #c9a35a; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 18px 50px rgba(0,0,0,.6); } .oc-pic img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; } .oc-cap { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 420px; max-width: 720px; padding: 10px 34px 12px; background: rgba(14,9,6,.88); border: 1px solid rgba(201,163,90,.55); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); } .oc-title { font-size: 40px; font-weight: 700; letter-spacing: .1em; color: #ffe08a; text-shadow: 0 3px 0 #3a2410, 0 0 18px rgba(255,200,90,.55); animation: oc-pop .5s .15s both cubic-bezier(.2,1.6,.4,1); } .oc-card.bad .oc-title { color: #ff9a8a; text-shadow: 0 3px 0 #2a0e0a, 0 0 18px rgba(255,90,70,.45); } .oc-sub { font-size: 19px; color: var(--cream, #f2e6cc); text-shadow: 0 2px 4px #000; max-width: 720px; text-align: center; } @keyframes oc-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } @keyframes oc-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } /* 조합의 보물 지도 (js/systems/treasurehunt.js) */ .tmap-wrap { display: flex; justify-content: center; } .tmap-cv { width: 720px; max-width: 100%; height: auto; display: block; box-shadow: 0 6px 18px rgba(40,22,8,.45); border-radius: 3px; } .tmap-note { margin-top: 12px; font-size: 16px; line-height: 1.65; } /* ---------------------------------------------------------------- UI QA 2026-10-11 (1~4) */ /* 1 글씨·창 크기: 작은 화면에서는 UI 층(#ui)을 CSS zoom으로 키운다 (js/main.js fitUi) — 그만큼 UI 층이 좁아지므로 창이 넘치지 않게 */ .win { max-width: min(1400px, calc(100% - 20px)); max-height: min(820px, calc(100% - 16px)); } .win .content { min-height: 0; } .ui-zoomed .hud { overflow: hidden; } .ui-zoomed .hud .cell { padding: 0 10px; } .ui-zoomed .hud .cell.two { padding: 0 8px; } /* 휴대폰을 세로로 들면: 가로로 돌리라고 알린다 (누르면 닫힘) */ #rotate-hint { position: fixed; inset: 0; z-index: 100000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(7,5,10,.94); color: var(--cream); font-family: var(--serif); font-size: 20px; text-align: center; padding: 24px; line-height: 1.6; } #rotate-hint .rh-ic { font-size: 54px; line-height: 1; } #rotate-hint small { color: var(--cream-dim); font-size: 15px; } @media (orientation: portrait) and (pointer: coarse) { #rotate-hint:not(.off) { display: flex; } } /* 한국어는 낱말 중간에서 줄을 바꾸지 않는다 (「정보를 듣/는다」 같은 꺾임 — 3번). 아주 긴 낱말만 어디서든 꺾는다 */ #ui { word-break: keep-all; overflow-wrap: anywhere; } /* 2 알림이 창(수첩·교역표…) 위를 덮지 않게: 창이 열려 있는 동안 알림은 왼쪽 아래 구석에 작게 */ #ui:has(.modal-back > .win) > .toasts { top: auto !important; bottom: 16px; left: 16px; transform: none; align-items: flex-start; } #ui:has(.modal-back > .win) > .toasts .toast { min-width: 0; max-width: 400px; font-size: 16px; padding: 8px 14px 8px 10px; } #ui:has(.modal-back > .win) > .toasts .toast svg { width: 24px; height: 24px; flex-basis: 24px; } /* 3 두 칸 명령 메뉴: 오른쪽 작은 글(값·조건)을 이름 아래 줄로 — 이름이 한 줄에 다 들어가게 */ .cmdmenu.many .cmd { display: grid; grid-template-columns: 24px 1fr; column-gap: 9px; row-gap: 1px; align-items: center; } .cmdmenu.many .cmd svg { grid-row: 1 / span 2; } .cmdmenu.many .cmd .sub { grid-column: 2; margin-left: 0; font-size: 13px; line-height: 1.25; } .cmd .sub { white-space: nowrap; } .cmdmenu.many .cmd .sub { white-space: normal; } /* 한 칸 메뉴: 이름은 한 줄로 두고, 오른쪽 작은 글이 길면 그쪽을 줄바꿈 (「아이와 함께」가 세로로 쪼개지던 것) */ .cmdmenu:not(.many) .cmd > span:not(.sub) { flex: 0 1 auto; min-width: min(7.5em, 62%); } .cmdmenu:not(.many) .cmd > .sub { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: right; line-height: 1.25; } /* 4 두 사람 대화: 지금 말하는 사람의 이름표를 밝게, 듣는 사람은 흐리게 */ .dlg-stage > .actor-name { transition: opacity .15s, filter .15s; } .dlg-stage > .actor-name.quiet { opacity: .55; filter: saturate(.5) brightness(.85); font-size: 15px; } .dlg-stage > .actor-name.speaking { color: #fff3d0; box-shadow: inset 0 0 0 1px rgba(227,198,141,.75), 0 0 0 1px #0c0806, 0 0 14px rgba(227,198,141,.45), var(--shadow); } .dlg-stage > .actor-name.speaking::before { content: '▸ '; color: var(--gold); } /* 1600×900에 맞춰 짠 온 화면 판(캐릭터 만들기)은 UI 층을 키워도 원래 크기로 (넘치지 않게) */ .ui-zoomed .create { zoom: var(--unz, 1); } /* 글씨·창 크기를 키우면 UI 층이 좁아진다: 바다의 아래 단추줄과 작은 해도·바람 판이 겹치지 않게 해도·바람 판을 단추줄 위로, 항해 중 알림은 상태줄과 겹치지 않게 상태줄 아래 왼쪽으로 */ .ui-zoomed .minimap, .ui-zoomed .windbox { bottom: 94px; } .ui-zoomed #ui.at-sea .toasts { left: 18px; top: 168px; transform: none; align-items: flex-start; } /* ---------------------------------------------------------------- 개척 도시 (js/systems/colony.js · js/city/colonyhall.js) */ /* 새 건물이 선 거리 위의 금빛 글귀 (그림이 있으면 그림과 함께) */ .colony-banner { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); z-index: 58; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; animation: cb-in .5s ease-out both; pointer-events: auto; } .colony-banner.out { animation: cb-out .45s ease-in forwards; } .colony-banner .cb-box { min-width: 560px; max-width: 900px; padding: 16px 40px 14px; text-align: center; background: linear-gradient(180deg, rgba(20,14,8,.86), rgba(12,8,4,.8)); border: 1px solid rgba(217,180,95,.7); box-shadow: 0 0 0 1px #0c0806, 0 10px 30px rgba(0,0,0,.55), inset 0 0 30px rgba(217,180,95,.12); } .colony-banner .cb-kicker { font-size: 15px; letter-spacing: .3em; color: var(--brass-hi); display: flex; align-items: center; justify-content: center; gap: 6px; } .colony-banner .cb-title { font-size: 40px; font-weight: 800; letter-spacing: .08em; color: #ffe08a; text-shadow: 0 3px 0 #3a2410, 0 0 22px rgba(255,200,90,.55); margin: 4px 0 2px; animation: oc-pop .6s .15s both cubic-bezier(.2,1.6,.4,1); } .colony-banner .cb-sub { font-size: 20px; color: var(--cream); } .colony-banner .cb-now { margin-top: 6px; min-height: 26px; font-size: 18px; color: #ffe9a8; letter-spacing: .12em; } .colony-banner .cb-now:not(:empty)::before { content: '✦ '; } .colony-banner .cb-now:not(:empty)::after { content: ' ✦'; } .colony-banner .cb-now:empty { display: none; } .colony-banner .cb-more { margin-top: 4px; font-size: 13px; color: var(--cream-dim); } .colony-banner .cb-pic { width: 760px; max-width: 92vw; aspect-ratio: 16 / 9; border: 3px solid #b8925a; box-shadow: 0 12px 34px rgba(0,0,0,.6); background: #1a120a; overflow: hidden; } .colony-banner .cb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .colony-banner.with-pic { top: 64px; } #ui.colony-show .todo, #ui.colony-show .cmdmenu, #ui.colony-show .infobar, #ui.colony-show .caption, #ui.colony-show .city-banner { opacity: 0; pointer-events: none; transition: opacity .35s; } #ui.colony-show > .toasts { top: auto !important; bottom: 16px; left: 16px; transform: none; align-items: flex-start; } /* 글귀를 가리지 않게 알림은 왼쪽 아래로 */ #ui.colony-show > .toasts .toast { min-width: 0; max-width: 400px; font-size: 16px; padding: 8px 14px 8px 10px; } @keyframes cb-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes cb-out { to { opacity: 0; transform: translate(-50%, -16px); } } /* 세울 곳 고르기 */ .col-pick { display: flex; gap: 16px; align-items: stretch; } .col-pick .cp-map { flex: 0 0 auto; } .col-pick .cp-cv { width: 680px; height: 470px; display: block; border: 2px solid #7a5c33; box-shadow: 0 4px 14px rgba(40,24,8,.35); cursor: pointer; } .col-pick .cp-side { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .col-pick .cp-list { display: flex; flex-direction: column; gap: 5px; } .col-pick .cp-item { padding: 7px 10px; font-size: 16px; } .col-pick .cp-item.on { border-color: #8a2a1e; background: rgba(176,30,30,.12); box-shadow: inset 0 0 0 1px rgba(176,30,30,.35); } .col-pick .cp-item .r { font-size: 13px; } .col-pick .cp-desc { font-size: 16px; line-height: 1.6; padding: 10px 12px; border: 1px solid rgba(110,80,40,.35); background: rgba(255,250,236,.4); } /* 개척 현황 */ .colony-status .cs-head { font-size: 16px; color: var(--ink-soft); margin-bottom: 10px; } .colony-status .cs-steps { display: flex; flex-direction: column; gap: 6px; } .colony-status .cs-row { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid rgba(110,80,40,.3); opacity: .55; font-size: 17px; } .colony-status .cs-row small { font-size: 14px; color: var(--ink-soft); } .colony-status .cs-row.done { opacity: 1; background: rgba(59,106,62,.08); } .colony-status .cs-row.now { border-color: #3b6a3e; box-shadow: inset 0 0 0 1px rgba(59,106,62,.4); } .colony-status .cs-step { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #7a5c33; color: #f2e7cc; font-weight: 700; } .colony-status .cs-row.done .cs-step { background: #3b6a3e; } .colony-status .cs-need { margin-top: 12px; font-size: 17px; } .colony-status .cs-gov { margin-top: 8px; font-size: 17px; color: #6a1e1e; font-weight: 700; } .colony-kv { grid-template-columns: 160px 1fr !important; margin-bottom: 8px; } /* 명작 카드 (js/systems/studio.js) — 화실·조각실의 화가·조각가가 바치는 작품 */ .mw-card { text-align: center; font-size: 16px; line-height: 1.55; } .mw-frame { display: inline-block; padding: 12px; background: linear-gradient(135deg, #b8862e, #f0d27a 30%, #8a5a1a 55%, #e8c262 80%, #9a6a22); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 2px rgba(60,36,10,.6); } .mw-frame.sculpt { background: linear-gradient(180deg, #3a2a1c, #1a120c); } .mw-img { display: block; width: 420px; max-width: 100%; height: auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); } .mw-name { margin-top: 12px; font-size: 22px; font-weight: 700; } .mw-by { color: var(--muted, #8a7a60); font-size: 14px; } .mw-desc { margin: 8px auto 6px; max-width: 470px; text-align: left; font-size: 15px; } .mw-gain { font-size: 15px; } /* 왕립 박물관·동물원 전시실 (js/city/museum.js) */ .mu-sub { margin: 0 0 12px; font-size: 15px; } .mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; max-height: 62vh; overflow-y: auto; padding-right: 4px; } .mu-card { background: rgba(255,248,232,.55); border: 1px solid rgba(120,90,50,.35); border-radius: 6px; padding: 10px; text-align: center; } .mu-pic { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .mu-pic img { max-width: 100%; max-height: 150px; object-fit: contain; } .mu-pic.frame img { padding: 6px; background: linear-gradient(135deg, #b8862e, #f0d27a 30%, #8a5a1a 55%, #e8c262 80%, #9a6a22); border-radius: 3px; } .mu-pic .ic { width: 64px; height: 64px; opacity: .6; } .mu-name { font-weight: 700; font-size: 16px; } .mu-meta { font-size: 13px; color: var(--muted, #8a7a60); margin: 2px 0 6px; } .mu-desc { font-size: 13px; text-align: left; line-height: 1.45; } /* 유럽 정세 (수첩 — js/systems/relations.js G.Rel.page) */ .rel-mine { line-height: 2.1; font-size: 15px; } .rel-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; color: #fff; font-size: 13px; margin: 1px 2px; text-shadow: 0 1px 1px rgba(0,0,0,.35); } .rel-wrap { overflow-x: auto; } .rel-tbl { border-collapse: separate; border-spacing: 2px; font-size: 12px; } .rel-tbl th { font-weight: 600; white-space: nowrap; padding: 2px 4px; text-align: right; } .rel-tbl tr:first-child th { height: 78px; vertical-align: bottom; text-align: center; } .rel-tbl tr:first-child th span { display: inline-block; writing-mode: vertical-rl; } .rel-tbl td { width: 26px; height: 22px; border-radius: 3px; text-align: center; color: #fff; font-size: 12px; } .rel-tbl td.self { background: rgba(0,0,0,.12); } .rel-ev { margin: 4px 0 0 18px; padding: 0; font-size: 14px; line-height: 1.5; } /* 선실 팝업 (2026-10-17) — 선실이 보이는 채로 사람·방을 고른다 (js/ui/cabinview.js popRoom·popMate) */ .cb-pop { position: absolute; z-index: 30; width: 350px; max-height: 480px; display: flex; flex-direction: column; color: #281a0f; background: linear-gradient(180deg, #fbf3df, #efe0bd); border: 2px solid #8a6230; border-radius: 6px; box-shadow: 0 10px 28px rgba(20,12,6,.55), inset 0 0 0 1px rgba(255,248,226,.8); font-size: 14px; animation: cb-pop-in .12s ease-out; } @keyframes cb-pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } } .cb-pop-h { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 9px; color: #f4e4bd; font-size: 16px; background: linear-gradient(180deg, #4a2e18, #2f1d10); border-radius: 3px 3px 0 0; } .cb-pop-h > .ic { width: 18px; height: 18px; flex: none; } .cb-pop-h .cb-pow { margin-left: auto; } .cb-pop-h .cb-nm small { color: #d8c39a; } .cb-pop-h .cb-face.big { width: 44px; height: 44px; border-color: #c99a4a; } .cb-pop-x { margin-left: auto; flex: none; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: #f4e4bd; font-size: 22px; line-height: 22px; cursor: pointer; } .cb-pop-h .cb-pow + .cb-pop-x { margin-left: 4px; } .cb-pop-x:hover { color: #fff; text-shadow: 0 0 6px rgba(255,214,130,.9); } .cb-pop-d { padding: 6px 10px; font-size: 13px; line-height: 1.45; border-bottom: 1px solid rgba(110,80,40,.3); } .cb-pop-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding: 5px; } .cb-pop-row { display: flex; align-items: center; gap: 7px; padding: 3px 7px 3px 3px; cursor: pointer; border: 1px solid rgba(110,80,40,.35); background: rgba(255,250,236,.7); } .cb-pop-row:hover { background: #fff6d6; border-color: #b8862f; } .cb-pop-row.best { border-color: #c99a3c; background: rgba(255,236,180,.9); box-shadow: inset 3px 0 0 #c99a3c; } .cb-pop-row.rec { box-shadow: inset 3px 0 0 rgba(201,154,60,.5); } .cb-pop-row.cur { opacity: .6; cursor: default; } .cb-pop-row .cb-face { width: 36px; height: 36px; } .cb-pop-row.room > .ic { width: 22px; height: 22px; flex: none; color: #7a5524; } .cb-pop-row .cb-nm { flex: 1; font-size: 14px; } .cb-pop-row .cb-nm small { white-space: normal; } .cb-pop-row .cb-fit { color: #2f5b8c; font-weight: 700; } .cb-pop-row .tag { font-size: 11px; padding: 0 4px; margin-left: 3px; vertical-align: 1px; } .cb-pop-row .cb-occ { flex: none; display: flex; align-items: center; gap: 4px; max-width: 120px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; } .cb-pop-row .cb-occ .cb-face { width: 24px; height: 24px; } .cb-pop-f { display: flex; gap: 6px; justify-content: flex-end; padding: 6px 8px; border-top: 1px solid rgba(110,80,40,.3); } .cb-pop-f .btn .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; } .cb-rec { color: #fff; background: #b8862f; border-color: #8a6230; } .cb-sel.cb-card, .cb-sel.cb-pin, .cb-sel.cb-mate, .cb-sel .cb-ring { box-shadow: 0 0 0 3px #f0c766, 0 0 14px rgba(255,214,130,.9) !important; } /* 미래의 건물을 신기루로 본 발견 (2026-10-18) — 카드 그림이 아지랑이처럼 일렁이고, 사라지는 장면은 .mirage.vanish */ .disc-card.mirage-find .art { animation: mirageWave 2.4s ease-in-out infinite; filter: sepia(.32) saturate(.8) brightness(1.12) contrast(.9); } .disc-card.mirage-find .disc-head { letter-spacing: .5em; color: #b27a2a; } .tag.mirage-tag { background: #f3e2bd; color: #8a5a1a; border-color: #d6b47a; } .desc.mirage-note { font-style: italic; color: #7a5a2a; } .mirage.vanish { animation: mirageVanish var(--mirage-ms, 3200ms) ease-in forwards; } .mirage.vanish .mirage-pic img, .mirage.vanish .mirage-pic canvas { animation: mirageDissolve var(--mirage-ms, 3200ms) ease-in forwards; } @keyframes mirageVanish { 0% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 0; transform: translate(-50%, -52%) scale(1.04); } } @keyframes mirageDissolve { 0% { filter: sepia(.35) saturate(.75) brightness(1.18) contrast(.85) blur(1.2px); } 100% { filter: sepia(.6) saturate(.4) brightness(1.6) contrast(.6) blur(9px); } } @media (prefers-reduced-motion: reduce) { .mirage.vanish, .mirage.vanish .mirage-pic img, .disc-card.mirage-find .art { animation: none; } } /* 경험과 성장 (js/systems/growth.js) — 수첩 「제독」 */ .gr-kinds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 10px; } .gr-kind { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid rgba(110,80,40,.3); background: rgba(255,250,236,.35); font-size: 15px; } .gr-kind svg { width: 20px; height: 20px; grid-row: 1 / span 3; color: #7a5c33; } .gr-kind span { font-size: 17px; font-weight: 700; } .gr-kind small { font-size: 12px; color: var(--ink-soft); } .gr-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; } .gr-bar { display: grid; grid-template-columns: 90px 1fr; column-gap: 8px; align-items: center; font-size: 15px; } .gr-bar small { grid-column: 2; font-size: 12px; color: var(--ink-soft); } .gr-track { height: 8px; background: rgba(90,60,30,.18); border-radius: 4px; overflow: hidden; } .gr-track i { display: block; height: 100%; background: linear-gradient(90deg, #b8925a, #e6c27a); } /* 화면·글꼴 설정 (js/ui/display.js) — 2026-10-18 */ .dlg-sample { padding: 14px 18px; background: rgba(255,250,236,.55); border: 1px solid rgba(110,80,40,.35); color: var(--ink); font-size: 21px; line-height: 1.7; } .disp-panel .opt-row .opt { min-width: 64px; text-align: center; } /* 고딕 글꼴은 명조보다 글자 사이가 좁아 보여 조금 띄운다 */ html[data-font="nanumgothic"] body, html[data-font="notosans"] body { letter-spacing: .01em; } .title-menu .title-row { display: flex; gap: 10px; } .title-menu .title-row .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; font-size: 20px; letter-spacing: .02em; } /* 기함 선실 — 오른쪽 아래 「함대에 적용되는 능력」 (js/ui/cabinview.js totalsHtml, 2026-10-19) */ .cb-totals { margin-top: 10px; padding: 8px 10px 10px; border: 1px solid rgba(110,80,40,.35); background: rgba(255,250,236,.4); } .cb-totals .cb-sub { margin-bottom: 4px; } .cb-tsub { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 4px 0 3px; } .cb-tsks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; } .cb-tsk { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--ink); white-space: nowrap; } .cb-tsk > span:first-child { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .cb-tsk.zero { color: rgba(74,59,44,.45); } .cb-dots { display: inline-flex; gap: 2px; } .cb-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(110,80,40,.55); background: transparent; display: inline-block; } .cb-dot.on { background: #b07a2c; border-color: #7a5c33; } .cb-tfxs { max-height: 150px; overflow-y: auto; } .cb-tfx { display: grid; grid-template-columns: 18px 1fr auto 12px; align-items: center; gap: 5px; font-size: 13px; line-height: 1.55; color: var(--ink); } .cb-tfx svg.ic { width: 15px; height: 15px; color: #7a5c33; } .cb-tfx b { color: #2a4a70; font-weight: 700; white-space: nowrap; } .cb-up { color: #2e7a34; font-style: normal; font-size: 11px; } .cb-dn { color: #a33a2a; font-style: normal; font-size: 11px; } .cb-tnone { font-size: 13px; } .cb-tnone-sk { font-size: 12px; line-height: 1.4; margin-top: 3px; } .cb-tfxs { max-height: 124px; } /* 술집: 마주 앉은 사람의 인물 카드 (js/city/tavern.js T.showCard) */ .mcard-solo { max-height: 74vh; } /* 자동항해 목적지 — 방향·즐겨찾기·지역 묶음 (js/city/harbor.js pickAutoDest) */ .autodest .fav-star { margin-left: 10px; font-size: 22px; line-height: 1; color: #a08250; cursor: pointer; padding: 0 4px; } .autodest .fav-star:hover { color: #c8902c; transform: scale(1.15); } .autodest .fav-star.on { color: #d49a1e; text-shadow: 0 0 2px rgba(120,80,10,.45); } .autodest .autodest-head { font-size: 15px; font-weight: 700; color: var(--ink-soft); margin: 6px 2px -2px; letter-spacing: .02em; } .autodest .autodest-head .r { margin-left: 8px; font-weight: 400; } .autodest .autodest-group { background: linear-gradient(180deg, #f3e3c0, #e3cc9c); } .autodest .autodest-group .tri { width: 18px; color: var(--brass-deep); } .autodest .autodest-sub { margin-left: 22px; } .autodest { gap: 5px; } .autodest .choice { padding: 6px 14px; font-size: 19px; } .autodest .choice small { font-size: 14px; } /* 플레이 가이드북 — 쪽 넘기기 · 그림과 번호 설명 나란히 (2026-10-21, js/ui/guidebook.js) */ .gb-page .gb-kicker { display: flex; justify-content: space-between; } .gb-page .gb-kicker span { letter-spacing: 0; } .gb-page .gb-lead { margin: 0 0 4px; } .gb-page .gb-lead p:first-child { margin-top: 0; } .gb-page h3:first-child, .gb-page .gb-lead + h3 { margin-top: 12px; } .gb-sec.on { color: #fff; background: rgba(240,192,64,.18); } .gb-duo { display: flex; gap: 18px; align-items: flex-start; margin: 10px 0 12px; } .gb-duo .gb-fig { flex: 0 0 54%; margin: 0; } .gb-duo .gb-fig img { width: 100%; max-height: none; } .gb-duo .gb-table { flex: 1; margin: 0; font-size: 14px; line-height: 1.38; } .gb-duo .gb-table th, .gb-duo .gb-table td { padding: 4px 7px; } .gb-page h2 { font-size: 25px; margin: 0 0 8px; padding-bottom: 4px; } .gb-page h3 { font-size: 20px; margin: 10px 0 6px; } .gb-page .gb-duo + ul, .gb-page .gb-duo + p { margin-top: 6px; } .gb-page ul li, .gb-page p { font-size: 16px; line-height: 1.6; } .gb-table.gb-legend td:first-child, .gb-table.gb-legend th:first-child { width: 38px; white-space: nowrap; text-align: center; padding-left: 4px; padding-right: 4px; } .gb-table.gb-legend td:first-child { font: bold 14px/1 sans-serif; color: #fff; } .gb-table.gb-legend td:first-child span { display: inline-block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background: #d0342c; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.4); } .gb-table.gb-legend td:nth-child(2) { white-space: nowrap; font-weight: bold; } @media (max-width: 1100px) { .gb-duo { flex-direction: column; } .gb-duo .gb-fig { flex: none; width: 100%; } } .gb-pair { display: flex; gap: 16px; align-items: flex-start; } .gb-pair .gb-fig { flex: 1; margin: 8px 0; } .gb-pair .gb-fig img { width: 100%; max-height: none; } /* 가문의 가계도 (2026-10-22, js/systems/familytree.js) — 자택 「가계도」 */ .ft-win .content { overflow-y: auto; } .ft-top { text-align: center; font-size: 15px; letter-spacing: .12em; margin: 0 0 8px; } .ft { display: flex; flex-direction: column; align-items: center; gap: 0; padding-bottom: 8px; } .ft-row { display: flex; flex-direction: column; align-items: center; width: 100%; } .ft-couple { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border: 1px solid rgba(122,92,51,.45); border-radius: 10px; background: rgba(255,248,230,.55); box-shadow: 0 2px 6px rgba(60,40,20,.15); } .ft-couple.now { border-color: #c9a227; box-shadow: 0 0 0 2px rgba(201,162,39,.35), 0 2px 8px rgba(60,40,20,.2); } .ft-person { display: flex; align-items: center; gap: 10px; min-width: 200px; } .ft-face canvas, .ft-face .ft-noface { display: block; border-radius: 50%; border: 2px solid #7a5c33; background: #2a1d12; } .ft-noface { color: #d9c49a; text-align: center; font-size: 26px; } .ft-gen { font-size: 13px; color: #8a6a3a; letter-spacing: .08em; } .ft-now { display: inline-block; padding: 0 6px; border-radius: 8px; background: #c9a227; color: #2a1d12; font-size: 12px; letter-spacing: 0; } .ft-name { font-size: 20px; } .ft-sub { font-size: 13px; color: #6b5536; line-height: 1.4; } .ft-tie { font-size: 26px; color: #8a6a3a; } .ft-kids { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 2px solid rgba(122,92,51,.5); max-width: 100%; } .ft-kids::before { content: ''; position: absolute; left: 50%; top: -24px; height: 22px; border-left: 2px solid rgba(122,92,51,.5); } .ft-kid { position: relative; width: 148px; padding: 8px 6px 7px; text-align: center; border: 1px solid rgba(122,92,51,.35); border-radius: 8px; background: rgba(255,250,238,.6); } .ft-kid::before { content: ''; position: absolute; left: 50%; top: -16px; height: 14px; border-left: 2px solid rgba(122,92,51,.5); } .ft-kid .ft-face { display: flex; justify-content: center; margin-bottom: 4px; } .ft-kid b { font-size: 16px; } .ft-fate { margin-top: 3px; font-size: 13px; line-height: 1.35; color: #4a3820; } .ft-kid.heir { border: 2px solid #c9a227; background: rgba(255,240,200,.75); } .ft-kid.heir .ft-fate { font-weight: bold; color: #7a5200; } .ft-kid.wed .ft-fate { color: #9a3f5a; } .ft-kid.mate .ft-fate { color: #2f5d7a; } .ft-kid.lost .ft-fate { color: #777; font-style: italic; } .ft-none { margin-top: 10px; font-size: 14px; color: #8a7350; } .ft-down { color: #c9a227; font-size: 22px; line-height: 1; margin: 8px 0; } /* 건물 메뉴의 긴 설명 → 풍선 도움말 (js/ui/ui.js UI.cmdMenu, 2026-10-23) — 메뉴마다 풍선 하나(.cmd-tip)를 메뉴 상자 바깥(메뉴가 오른쪽이면 왼쪽)에 띄운다. 버튼 ::after 를 쓰지 않으니 튜토리얼 「여기」 표(.cmd.tut-glow::after)를 덮지 않고, 흐린 항목의 투명도도 물려받지 않는다. 마우스를 올리거나 방향키로 고를 때만 뜬다 (메뉴를 막 열었을 때 첫 항목에 저절로 붙는 키보드 표시로는 뜨지 않는다) */ .cmd { position: relative; } .cmd .sub { white-space: nowrap; } .cmd .tipdot { position: absolute; right: 6px; top: 3px; font-size: 12px; line-height: 1; color: var(--cream-dim); opacity: .65; } .cmd.dim > .tipdot { opacity: .45; } .cmd-tip { display: none; position: absolute; right: calc(100% + 12px); top: 0; z-index: 30; box-sizing: border-box; width: max-content; max-width: 260px; padding: 8px 12px; font-size: 15px; line-height: 1.45; white-space: normal; text-align: left; letter-spacing: 0; color: #f3e6c8; background: rgba(28,20,13,.97); border: 1px solid var(--brass); border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.45); pointer-events: none; } .cmd-tip.on { display: block; } .cmd-tip::before { /* 꼬리 — 버튼 쪽을 가리킨다 (--ay: 풍선 위에서 버튼 가운데까지) */ content: ''; position: absolute; left: 100%; top: var(--ay, 50%); transform: translateY(-50%); border: 8px solid transparent; border-left-color: var(--brass); } .cmd-tip.to-right { right: auto; left: calc(100% + 12px); } .cmd-tip.to-right::before { left: auto; right: 100%; border-left-color: transparent; border-right-color: var(--brass); } .cmdmenu.talk-hidden .cmd-tip { display: none; } .cmdmenu:not(.many) .cmd { height: 44px; box-sizing: border-box; } .cmdmenu:not(.many) .cmd > .sub { white-space: nowrap; flex: 0 0 auto; } /* 짧은 수치·상태만 남으니 한 줄로 (긴 설명은 풍선) */ .cmdmenu:not(.many) .cmd > span:not(.sub):not(.tipdot) { flex: 1 1 auto; min-width: 0; white-space: nowrap; } /* 이름은 한 줄 — 자리를 미리 잡지 않으니 짧은 이름 옆의 「물건 값 131%」도 한 줄로. 넘치면 fitCmdMenu 가 맞춘다 */ /* 넘치는 버튼 (js/ui/ui.js fitCmdMenu): ① 조금 작은 글 ② 오른쪽 작은 글을 두 줄로 — 그래도 넘치면 풍선으로 옮긴다 */ .cmd.tight { gap: 8px; padding-left: 10px; padding-right: 10px; } .cmd.tight > span:not(.sub):not(.tipdot) { font-size: 17px; letter-spacing: 0; } .cmd.tight > .sub { font-size: 12.5px; letter-spacing: 0; } .cmdmenu:not(.many) .cmd.sub2 { padding-top: 2px; padding-bottom: 2px; } .cmdmenu:not(.many) .cmd.sub2 > span:not(.sub):not(.tipdot) { flex-shrink: 0; } /* 두 줄로 접는 쪽은 작은 글 — 이름은 그대로 */ .cmdmenu:not(.many) .cmd.sub2 > .sub { white-space: normal; flex: 0 1 auto; min-width: 0; max-width: 55%; line-height: 1.15; text-align: right; word-break: keep-all; } /* 어린 맏아들을 기다리는 세월 (js/systems/family.js F.regency) */ .regency { text-align: center; padding: 6px 4px 2px; } .regency .rg-date { font-size: 34px; font-weight: 800; color: var(--brass-deep, #57401f); letter-spacing: .04em; } .regency .rg-kid { margin: 6px 0 12px; font-size: 18px; } .regency .rg-bar { height: 10px; border-radius: 5px; background: rgba(0,0,0,.18); overflow: hidden; } .regency .rg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a7822f, #e3c68d); transition: width .2s; } .regency .rg-news { min-height: 44px; margin-top: 12px; font-size: 15px; line-height: 1.5; } /* 통역 장부 (제독 수첩 — js/ui/info.js interpBook, 2026-10-25) */ .ibook { margin-top: 10px; font-size: 15px; } .ibook .ibook-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; } /* 건물 외관과 같은 재질로 그린 미니게임. 글자와 판정 표시는 그림 위에 별도로 둔다. */ .mg-sprite { display: inline-block; flex: none; pointer-events: none; } .mg-art .pz-intro, .mg-art > div:first-child:not(.poker):not(.mg-sphinx-scene) { font-size: 16px !important; } .mg-art .hanoi, .mg-art .grail-row, .mg-art .balance-stage, .mg-art .maze-wrap, .mg-art .cube-wrap { background: #63533e var(--mg-scene) center 58% / cover no-repeat; border: 2px solid #806039; border-radius: 5px; box-shadow: inset 0 0 35px #271b1266; } .mg-art .hanoi { height: 300px; gap: 18px; padding: 35px 24px 36px; } .mg-art .hanoi .peg { width: 220px; flex: 1; min-width: 0; height: 230px; border: 0; padding-bottom: 0; border-radius: 4px; } .mg-art .hanoi .peg::after { content: attr(data-label); position: absolute; bottom: -27px; padding: 2px 14px; border: 1px solid #a9834f; border-radius: 3px; color: #ffeccc; background: #322319e8; font-size: 14px; } .mg-art .hanoi .peg.sel { background: #edc87522; outline: 1px solid #ffe3a6; } .mg-art.mg-ready .hanoi .pole { background: var(--mg-props) var(--mg-pole-pos) / var(--mg-pole-size) no-repeat; width: 40px; height: 222px; margin-left: -20px; } .mg-art.mg-ready .hanoi .disc { background-color: transparent !important; border-radius: 0; box-shadow: none; background-image: var(--mg-props); background-size: var(--mg-disc-size); background-position: var(--mg-disc-pos); height: 32px; margin-top: -1px; filter: drop-shadow(0 3px 2px #21170d88); max-width: 96%; } .mg-art .disc b { display: block; text-align: center; font-size: 13px; color: #ffedb2; text-shadow: 0 1px 2px #21150a, 0 0 4px #21150a; line-height: 27px; } .mg-art .peg.sel .disc:last-child { transform: translateY(-9px); filter: drop-shadow(0 0 5px #ffdc85); } .mg-art .balance-stage { min-height: 250px; padding: 10px; } .mg-art .pans { position: relative; width: 420px; height: 248px; max-width: 100%; margin: 0 auto; transform-origin: 50% 30%; } .mg-art .scale-picture { position: absolute; width: 330px; height: 245px; left: 45px; top: 0; } .mg-art .pans .beam { display: none; } .mg-art .pans .pan { position: absolute; top: 159px; width: 94px; min-height: 24px; padding: 4px; background: #28261bea; border: 1px solid #d2ac63; color: #fff3d2; border-radius: 4px; font-size: 13px; z-index: 1; } .mg-art .pans .L { left: 43px; } .mg-art .pans .R { right: 43px; } .mg-art .gems { padding: 10px; border: 1px solid #baa078; background: #37271e; border-radius: 4px; gap: 12px; } .mg-art.mg-ready .gem { background: var(--mg-props) var(--mg-gem-pos) / var(--mg-gem-size) no-repeat; border-radius: 8px; box-shadow: none; width: 58px; height: 67px; text-shadow: 0 1px 3px #000, 0 0 4px #000; } .mg-art.mg-ready .gems.many .gem { width: 41px; height: 48px; } .mg-art .gem.L { outline: 2px solid #ffb791; background-color: #8c3b2044; } .mg-art .gem.R { outline: 2px solid #8cd5ef; background-color: #24537044; } .mg-art .gem small { background: #22160ecc; padding: 0 5px; border-radius: 2px; font-size: 11px; } .mg-art .grail-row { gap: 32px; padding: 20px 16px 18px; min-height: 310px; align-items: flex-end; } .mg-art .vessel { position: relative; width: 190px; max-width: 30%; padding: 8px 5px; gap: 6px; } .mg-art .vessel.sel { background: #e8bf562e; box-shadow: inset 0 0 0 2px #ffe3a0; } .mg-art .vessel-art { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 190px; width: 100%; } .mg-art .cup-picture { width: 130px; max-width: 84%; height: 100%; filter: drop-shadow(0 4px 3px #34241199); } .mg-art .vessel:nth-child(2) .cup-picture { height: 84%; width: 120px; } .mg-art .vessel:nth-child(3) .cup-picture { height: 63%; width: 108px; } .mg-art .water-meter { width: 9px; height: 120px; border: 1px solid #e2bf7b; background: #19282ecc; border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 12px; } .mg-art .water-meter i { position: absolute; bottom: 0; width: 100%; background: linear-gradient(#83f0e8,#258cbe); transition: height .35s; } .mg-art .vessel .amt, .mg-art .vessel .lbl { background: #302319ed; color: #ffedc5; border: 1px solid #b49359; padding: 2px 9px; border-radius: 4px; font-size: 15px; } .mg-art .vessel .amt { font-size: 20px; min-width: 80px; text-align: center; } .mg-art .maze-wrap, .mg-art .cube-wrap { padding: 18px; gap: 18px; } .mg-art .maze, .mg-art .cboard { flex: none; box-shadow: 0 5px 18px #18100888; border-color: #4e3823; } .mg-art.mg-ready .maze .rm.seen, .mg-art.mg-ready .maze .rm.near, .mg-art.mg-ready .maze .rm.trail, .mg-art.mg-ready .cboard .cl { background-image: var(--mg-props); background-position: var(--mg-tile-pos); background-size: var(--mg-tile-size); } .mg-art .maze .rm.near { filter: brightness(.55); } .mg-art .maze .rm.trail { box-shadow: inset 0 0 0 2px #ba822f88; } .mg-art .maze .rm.wn { border-top: 4px ridge #644b31; } .mg-art .maze .rm.we { border-right: 4px ridge #644b31; } .mg-art .maze .rm.ws { border-bottom: 4px ridge #644b31; } .mg-art .maze .rm.ww { border-left: 4px ridge #644b31; } .mg-art .maze .rm.me::after { display: none; } .mg-art .maze-mark { position: absolute; inset: 3px; } .mg-art .maze-mark.mg-torch { inset: 1px 12px; filter: drop-shadow(0 0 6px #ffa33c); } .mg-art .maze-mark.locked { filter: brightness(.65); } .mg-art .maze-side, .mg-art .cube-side { align-self: stretch; background: #f2e4cbeF; border: 1px solid #ad8e57; padding: 12px; border-radius: 4px; color: #3a2a19; } .mg-art.mg-ready .cboard .cl.rock { background-color: #483c30; background-image: var(--mg-props); background-position: var(--mg-rock-pos); background-size: var(--mg-rock-size); } .mg-art .cboard .cl.goal { box-shadow: inset 0 0 0 3px #d09930; } .mg-art .cboard .cl.goal::before { content: ''; position: absolute; inset: 4px; background: var(--mg-props) var(--mg-door-pos) / var(--mg-door-size) no-repeat; opacity: .85; } .mg-art.mg-ready .cboard .cube { background: var(--mg-props) var(--mg-cube-pos) / var(--mg-cube-size) no-repeat; border-radius: 0; box-shadow: none; inset: 2px; filter: drop-shadow(0 3px 2px #27170988); } .mg-art .cboard .cube .pf { z-index: 1; background: #ffc833; box-shadow: 0 0 4px #663a09; } .mg-art .cboard .cube.ft .pf { inset: 12px 15px 21px; border: 1px solid #fff1a6; transform: rotate(-12deg); } .mg-art .cboard .cube.fb .pf { background: #281b14; } .mg-art.mg-ready .c3 .f3 { background-image: var(--mg-props); background-position: var(--mg-tile-pos); background-size: var(--mg-tile-size); border-color: #806139; } .mg-art.mg-ready .c3 .f3.em { background-color: #efbf45; background-blend-mode: multiply; box-shadow: inset 0 0 0 2px #f7d171; color: #6c390b; } .mg-art .cboard .cl .gl { background: #2c231ee6; color: #ffe8ac; padding: 3px 5px; border-radius: 3px; } .mg-sphinx-scene { height: 225px; border: 2px solid #826137; border-radius: 4px; background: #6c573d var(--mg-scene) center 8% / cover no-repeat; margin-bottom: 12px; } .mg-art .sphinx-q { background: #ead8b7; border: 1px solid #b49a6c; border-left: 4px solid #a17831; } .mg-art .poker { padding: 28px 22px 20px; background: #163c39 var(--mg-scene) center / 100% 100% no-repeat; border: 2px solid #84613a; border-radius: 6px; } .mg-art .poker .row { gap: 18px; margin: 10px 0 18px; } .mg-art .poker .plog { color: #ffeac1; font-size: 16px; background: #0c2624dc; border: 1px solid #a68a4d; padding: 8px; border-radius: 4px; } .mg-art.mg-ready .pcard { background: var(--mg-props) var(--mg-front-pos) / var(--mg-front-size) no-repeat; border: none; border-radius: 5px; box-shadow: none; filter: drop-shadow(2px 5px 3px #001b16bb); } .mg-art.mg-ready .pcard.back { background-position: var(--mg-back-pos); background-size: var(--mg-back-size); } .mg-art .pcard.held { outline: 2px solid #ffe5a1; box-shadow: 0 0 10px #ffe5a155; } .mg-art .pcard i { color: #ffe5a1; bottom: -23px; font-size: 13px; } .mg-art .pcard .r { left: 20px; top: 14px; font-size: 20px; } .mg-art .pcard .rb { right: 20px; bottom: 14px; font-size: 20px; } .mg-art .pcard .s { font-size: 42px; top: 42px; } .mg-fishing canvas { max-width: 100%; height: auto !important; box-sizing: border-box; box-shadow: 0 3px 13px #30211166; } .mg-fishing .fstat { gap: 8px; flex-wrap: wrap; } .mg-fishing .fbait { font-size: 14px; } @media (prefers-reduced-motion: reduce) { .mg-art .pans, .mg-art .water-meter i, .mg-art .pcard, .poker-deck b { transition: none; animation: none !important; } }